JQuery: получить ширину H2, которая содержит большинство символов/самая длинная

Question

Я пытаюсь выбрать H2, который содержит большинство символов, или является самой широкой по ширине, в зависимости от того, что проще, или если вы знаете, как для этого вы могли бы поставить оба? Я не уверен в синтаксисе.

Answer 1

Чтобы получить пиксель-Широчайший, вы могли бы просто цикл, хотя вид злоупотребления функции .width(), например:

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. Внутри этой функции w - это текущая ширина, поэтому мы просто видим, если она шире нашей самой широкой, и если она установит ширину текущего времени в самый широкий и widest в текущий <h2>, который оказался более широким, чем предыдущий самый широкий ,

Вы можете сделать что-то подобное для подсчета символов с помощью .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

Они оба очень похожи, вам придется проходить через каждую и проверять каждую длину или ширину. Что-то вроде

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; 
} 

Вы можете заменить $(element).width() для $(element).text().length и переименовать вары соответствующим образом.

Обратите внимание, что если 2 элемента имеют одинаковую ширину, это будет выбирать только первый.

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"); 
});