Как измерить ширину элементов с помощью jQuery

Question

У меня раздражающая ошибка, из-за которой я забыл, почему это происходит:

У меня есть обычный список HTML

<ul> <li>Some text</li> <li>Another Text </li> <li>text</li> <li>another one</li> </ul>

, и я пытаюсь измерить каждую ширину li

Я пытался написать этот код jQuery:

for (var i=0; i++; i <4)
{
   $("ul li")[i].width();
}

, но почему-то это не сработало - что я делаю не так в этом предложении $("ul li")[i].width();?

Answer 1

$('ul li').each(function(){
     /*width*/
     console.log( $(this).width());
     /*width+padding*/
     console.log( $(this).outerWidth(true));
});

Answer 2

Для использования в пользовательском цикле вам нужно использовать метод .eq() (, и вам следует кэшировать список элементов, вместо повторного поиска всех их )

var li_elements = $("ul li");
for(var i=0, len = li_elements.length; i<len; i++) {
  var elementWidth = li_elements.eq(i).width();
   // do what you need with it..
}

или вы можете использовать .each() для перебора списка

$("ul li").each(function(){
   var elementWidth = $(this).width();
   // do what you need with it..
})

Answer 3

$('ul li').each(function()
{
    $(this).width();
});

Гораздо проще пройти через набор элементов с помощью функции .each().

Answer 4

$("ul li")[i] возвращает вам элемент DOM, а не объект jQuery. Использование:

var elements = $("ul li");
elements.each(function(){
    //do something with $(this).width()
});

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

Answer 5

Когда вы используете индексатор с объектом jquery, вы получаете элементы DOM.

try:

var $items = $("ul li");
for (var i=0; i < 4; i++)
{
   $items.eq(i).width();
}

Answer 6

Доступ к элементам массива в объектах jQuery вернет вам реальный объект DOM, а не объект, обернутый сахаром jQuery.Вместо этого используйте $(...).eq(0).width().

Кроме того, вы можете просто использовать метод each() для итерации по всем элементам вместо цикла for, что намного проще, приятнее и элегантнее ИМХО.