Comment régler la largeur égale sur divs avec javascript

Question

J'ai cinq lignes qui ressemble à ceci: C'est un ul avec lis. Je veux que le premier "texte" soit égal sur toutes les lignes. Pour ce faire, je dois rechercher le li le plus large, puis appliquer le nouveau à tous les li.

(ul> li> & durée ul)

Texte> Li 1 | li 2 | Li 3
Texte> Li 1 | li 2 | Li 3
Courte> Li 1 | li 2 | Li 3
Longer13456> Li 1 | li 2 | Li 3

J'ai utilisé la fonction suivante pour définir des hauteurs égales. Modifié un peu. Mais ça n'a aucun sens!

function equalWidth() { 
    var span = $('#tableLookAlike li.tr > span'), 
     tallest = 0, 
     thisHeight = 0; 

    setEqWidth = function(elem) { 
     elem.each(function() { 
      widest = 0; 
      thisWidth = $(this).outerWidth(); 
      console.log(tallest, thisWidth) 



// if I remove this it gives me the right width 
       elem.each(function() {Width) 
        if (thisWidth > widest) { 
         widest = thisWidth; 
         elem.css({'width': widest}); 
        } 
       }); 
      }); 
     } 

     setEqWidth(span); 
    } 

Le journal affiche 92, 69, 68, 118 lorsque je retire la deuxième elem.each, et quand je l'ai remis, il me donne 92, 130, 168, 206. Est-ce que quelqu'un sait ce qui se passe ici?

Aynway, comment résoudre ce problème?

Answer 1

function equalWidth() { 
    var span = $('#tableLookAlike li.tr > span'), 
     widest = 0, 
     thisWidth = 0; 

    setEqWidth = function(elem) { 
     widest = 0; 
     elem.each(function() { 
      thisWidth = $(this).outerWidth(); 

      if (thisWidth > widest) { 
       widest = thisWidth; 
      } 
     }); 

     elem.css({ 'width': widest }); 
    } 
    setEqWidth(span); 
} 

Answer 2

Vous devez définir la largeur des éléments à la fin de votre boucle. Sinon, la plus grande valeur est juste une valeur maximale temporaire.

setEqWidth = function(elem) { 
    elem.each(function() { 
     widest = 0; 
     thisWidth = $(this).outerWidth(); 
     console.log(tallest, thisWidth) 

     elem.each(function() { 
       if (thisWidth > widest) { 
        widest = thisWidth; 
       } 
      }); 
     }); 


     elem.css({'width': widest}); 
    } 

Answer 3

Si je devais le faire, ce serait quelque chose comme ceci:

var greatestWidth = 0; // Stores the greatest width 

$(selector).each(function() { // Select the elements you're comparing 

    var theWidth = $(this).width(); // Grab the current width 

    if(theWidth > greatestWidth) { // If theWidth > the greatestWidth so far, 
     greatestWidth = theWidth;  // set greatestWidth to theWidth 
    } 
}); 

$(selector).width(greatestWidth);  // Update the elements you were comparing 

Answer 4

Rappelez-vous: réglage de la largeur sera explicitement ne pas prendre en compte des padding sur les éléments en question, donc si ces éléments ont padding-left ou padding-right, vous allez vous retrouver avec une largeur supérieure à votre largeur maximale d'origine en raison du rembourrage qui est incorporé dans la largeur dans le modèle de la boîte CSS.

Cela rendra même votre élément d'origine encore plus large qu'il ne l'a commencé. La même chose s'applique à la définition de la hauteur avec padding-top et padding-bottom.

Si vous voulez être super précis, vous devrez prendre en compte padding avec quelque chose comme le code ci-dessous (si vous ne l'utilisez percantages ou ems ou fractions de pixels pour définir padding, vous pouvez utiliser parseInt() au lieu de parseFloat()):

var maxWidth = 0; 
var $els = $('.your-selector'); 
$els.each(function(){ 
    var w = $(this).width(); 
    if(w > maxWidth){ 
     maxWidth = w; 
    } 

} 

$els.each(function(){ 
    var $el = $(this); 
    var padding = parseFloat($el.css('padding-left'),100) + parseFloat($el.css('padding-right'),100); 

    $el.width(maxWidth - padding); 
}); 

Answer 5

Un peu plus concis

var widest = 0; 
$("#tableLookAlike li.tr > span").each(function() { widest = Math.max(widest, $(this).outerWidth()); }).width(widest);