将jQuery选择的属性存入数组中

Question

如何以最优雅的方式获取此数组

[10, 20, 30, 40, 50]

从这个列表之外

<ul>  
    <li value="10">Item One</li>
    <li value="20">Item Two</li>
    <li value="30">Item three</li>
    <li value="40">Item Four</li>
    <li value="50">Item Five</li>
</ul>

使用jQuery。

- David Weng

Answer 1

****编辑****

好的，手套已经扔下了......

var elements = (document.getElementsByTagName('li'));
var vals = [];
for(var i=0;typeof(elements[i])!='undefined';vals.push(elements[i++].getAttribute('value')));

没有库 3行代码...

运行速度极快

---

var myVals = [];
$('li','ul').each(function(){
  myVals.push($(this).attr('value'));
});

并使用jquery的map函数...

var myVals = [];
$('li','ul').map(function(){
  myVals.push($(this).attr('value'));
});

它们都同样快速。 http://jsperf.com/testing-stuff

- samccone

---

@samccone 但是可以返回值 :p - user166390

好的，你赢了。如果我们想要省下14个字符，我们可以这样做 :) - samccone

@natedavisolds，这就是为什么我提供了所有的解决方案 :) - samccone

+1，低级别的代码能跑得更快真是太神奇了！但优美的代码也是有代价的。 - Nicolas Buduroi

你不应该在映射函数中返回值吗？我认为这样会更快，因为你的解决方案实际上填充了两个数组，并且抛弃了第二个。所以，可以像这样做：var values = $.map($("li[value]"), function(li) { return $(li).attr("value"); }); - Alexis

Answer 2

我认为map函数完全没问题.. 只是不能在链式结构中使用。

var vals = $.map($("li[value]"), function(li) {
    return $(li).attr("value");
});

- natedavisolds

---

有趣的是，在一个明确要求使用 jQuery 解决方案的问题中，“不使用库”成为首选。 - natedavisolds

这也是问题所提出的“最优雅”的解决方案。对于如此小的运行来说，速度并不重要，但看到速度仍然很好。 - Ael

Answer 3

var outVal = [];
$('ul li').each(function(idx, el){
    outVal.push($(this).attr('value'));
});

- John Green

Answer 4

说到优雅的代码，我们可以使用Underscore结合jQuery来得到更好的解决方案：

_($('ul li').toArray()).map(function(e) { return e.value })

顺便问一下，我们为什么不放弃Javascript，改用CoffeeScript：

_($('ul li').toArray()).map (e) -> e.value

;-)

- Nicolas Buduroi

---

jQuery已经有$.map和.map（类似于flatmap）。但是使用map加1。 - user166390

是的，我忘记了jQuery有那个功能，看来我完全沉迷于Underscore了！ - Nicolas Buduroi

哈@nicolas...不错，我将我的代码压缩到3行而且没有用到任何库 :) - samccone

谢谢尼古拉斯，_是什么？我以前从未见过！ - David Weng

这是Underscore.js函数，一个非常棒的库，我希望有一天它能像jQuery一样普及：http://documentcloud.github.com/underscore/ - Nicolas Buduroi