如何使用jQuery测量元素宽度

How to measure an elements width with jQuery

本文关键字：元素 测量 何使用 jQuery      更新时间：2023-09-26

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

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

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

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

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

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

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

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

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

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

尝试：

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

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

此外，您只需使用each()方法来迭代所有项目，而不是使用for循环，这更容易、更好看、更优雅的IMHO。

相关文章：