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

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

使用.each()函数遍历一组元素要简单得多。

Answer 3

要在自定义循环中使用，您需要使用.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 4

当您使用带有jquery对象的索引器时，您将获得DOM元素。

尝试：

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

Answer 5

$("ul li")[i]返回一个DOM元素，而不是jQuery对象。使用：

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

另请注意，在循环外使用选择器并迭代它，而不是每次都重复选择。

Answer 6

访问jQuery对象上的数组项将返回实际的DOM对象，而不是用jQuery的糖包装的对象。请改用$(...).eq(0).width()。

此外，您可以使用each()方法迭代所有项目而不是for循环，这更容易，更漂亮，更优雅恕我直言。

如何使用jQuery测量元素宽度

6 个答案: