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

Вы можете проверить этоздесь .Внутри этой функции 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");​

Вы можете проверить эту версию здесь.

Answer 2

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

Answer 3

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

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 элемента имеют одинаковую ширину, будет выбран только первый.