使用jQuery获取列表中每个元素的宽度

Question

我试图获取元素中每个列表项的宽度值，但返回的是对象而不是宽度。这应该非常简单，但由于某些原因我必须错过了什么。

以下是我的代码：

    var listWidth = $('ul li').each(function(){
        return $(this).width();
    });

    console.log(listWidth);

- PropSoft

Answer 1

使用jQuery的map()^(文档)方法将值返回到一个jQuery对象中，然后再使用get()^(文档)方法将其转换为数组。

var listWidth = $('ul li').map(function(){
    return $(this).width();
}).get();

或者，您可以使用返回数组的jQuery.map()^(文档)方法。

var listWidth = $.map($('ul li'),function(val){
    return $(val).width();
});

- user113716

---

被30秒打败了。你可以回答剩下的问题。 - Raynos

好的，感谢您的回答。不确定 .get() 是从哪里来的。这不是一个 AJAX 请求。 - PropSoft

@ThePixelProdigy：什么AJAX请求？我的回答与AJAX无关。 - user113716

显然，jQuery有2个.get()函数（就像它有2个.load()函数一样）。一个函数是你在答案中使用的方式，而另一个函数用于AJAX请求。 - jhartz

Answer 2

您也可以通过将值推送到数组中来获取它们：

var listWidth = [];
$('ul li').each(function() {
    listWidth.push($(this).width());
});

console.log(listWidth);

Here's an example.

- mVChr

Answer 3

由于您将拥有多个列表项，因此可以在进行操作时创建一个宽度数组：

var listWidth = [];
$('ul li').each(function(){
    listWidth.push($(this).width());
});

console.log(listWidth);

或者，你可以创建一个带有宽度的对象：

var listWidth = {};
$('ul li').each(function(){
    listWidth[$(this).attr('id')] = $(this).width();
});

console.log(listWidth);

这个例子创建了一个包含标签id和宽度的对象（{ id1: width, id2: width, etc...}，假设每个标签都有一个id）。

你发布的示例代码存在问题，当返回宽度时，它将其返回给each函数（该函数可能会将其丢弃），但是listWidth是each函数的返回值，而不是其中的匿名函数（因此，由于each函数返回jQuery对象，因此将其分配给了listWidth）。

- jhartz