如何使用 jQuery 测量元素的宽度

【问题标题】：How to measure an elements width with jQuery如何使用 jQuery 测量元素的宽度
【发布时间】：2011-11-28 13:21:25
【问题描述】：

我有一个烦人的错误，我忘记了为什么会发生：

我有一个普通的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(); 中做错了什么？

【问题讨论】：

您希望发生什么？
你期待什么？
我想检查每个
元素的宽度 - 假设每个元素的文本大小不同

标签： javascript jquery html css dom

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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..
})

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

尝试：

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

【讨论】：

为什么要提取dom元素并重建...可以使用内置方法.eq()

【解决方案6】：

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

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

【讨论】：