如何使用 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

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

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

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

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

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

另请注意，在循环外部使用选择器一次，然后对其进行迭代，而不是每次都重复选择。

Answer 5

当您将索引器与 jquery 对象一起使用时，您将获得 DOM 元素。

尝试：

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 循环，恕我直言，这更容易、更美观、更优雅。