Jquery: Obtenir la largeur du H2 qui contient le plus de caractères/est le plus long

Question

J'essaye de sélectionner le H2 qui contient le plus de caractères, ou qui est le plus large en largeur, quel que soit le plus simple, ou si vous savez Pour ce faire, pourriez-vous mettre les deux? Je ne suis pas sûr de la syntaxe.

Answer 1

Pour obtenir le pixel le plus large, vous pourriez juste boucle si genre d'abus de la fonction .width(), par exemple:

var cw = 0, widest; 
$("h2").width(function(i, w) { if(w > cw) {widest = this; cw = w;} return w; }); 
//widest == widest h2 element 
//$(widest).addClass("widest"); 

You can test it out here. A l'intérieur de cette fonction w est la largeur actuelle, donc nous voyons juste si elle est plus large que notre largeur actuelle, et si oui, la largeur actuelle est la plus large et widest à l'actuelle <h2> qui était plus large que la largeur précédente .

Vous pouvez faire quelque chose de similaire pour le nombre de caractères utilisant .text():

var cw = 0, widest; 
$("h2").text(function(i, t) { if(t.length > cw) {widest = this; cw = t.length;} return t; }); 
$(widest).addClass("widest");​ 

You can test that version here.

Answer 2

Ils sont tous les deux assez similaires, vous devrez parcourir chacun d'eux et vérifier chaque longueur ou largeur. Quelque chose comme

var maxWidth = 0; 

function getLongest(){ 
    var elementWidth, 
    domNode; 

    $("h2").each(function(i, element){ 
    elementWidth = $(element).width(); 
    if (elementWidth > maxWidth){ 
     domNode = element; 
     maxWidth = elementWidth; 
    } 
    } 
    return domNode; 
} 

Vous pouvez remplacer $(element).width() pour $(element).text().length et renommer vars de façon appropriée.

Notez que si 2 éléments ont exactement la même largeur, cela sélectionnera seulement le premier.

Answer 3

$(document).ready(function() { 
    var longestH2 = null; 
    $("h2").each(function(k, v) { 
     if ($(v).width() > $(longestH2).width() || longestH2 == null) longestH2 = v; 
    }); 
    $(longestH2).css("border", "3px solid red"); 
});