What's the most elegant way to get this array
[10, 20, 30, 40, 50]
out of this list
<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>
using jQuery.
****edit****
ok the glove has been thrown down...
var elements = (document.getElementsByTagName('li'));
var vals = [];
for(var i=0;typeof(elements[i])!='undefined';vals.push(elements[i++].getAttribute('value')));
no library 3 lines of code...
epicly faster
var myVals = [];
$('li','ul').each(function(){
myVals.push($(this).attr('value'));
});
and using jquery's map function...
var myVals = [];
$('li','ul').map(function(){
myVals.push($(this).attr('value'));
});
and they are both equally as fast..
http://jsperf.com/testing-stuff
I think that map works just fine.. just not in the chain.
var vals = $.map($("li[value]"), function(li) {
return $(li).attr("value");
});
var outVal = [];
$('ul li').each(function(idx, el){
outVal.push($(this).attr('value'));
});
Speaking of elegant code, we can get a better solution using Underscore in combination with jQuery:
_($('ul li').toArray()).map(function(e) { return e.value })
And while we're at it, why not dump Javascript for CoffeeScript:
_($('ul li').toArray()).map (e) -> e.value
;-)
