I have a un-ordered list containing links with the same class and a unique ID, I need to add all those ID's to an array in javascript with.
<ul>
<li><a class="item" id="10" href="#"></a></li>
<li><a class="item" id="11" href="#"></a></li>
<li><a class="item" id="12" href="#"></a></li>
<ul>
How could I do this?
var ids = document.getElements("ul li a.item").get("id");
console.log(ids); // ["10", "11", "12"]
an easier (more mootools-like) way to do what @Dimitar did:
var ids = $$('.item').get('id');
Good Luck
$$ actually maps to this.document.getElements so that's slower. 2nd, this is a less-qualified selector and less performant in browsers that lack querySelectorAll (IE) as it has no getElementsByClassName either so .item will walk ALL NODES. and thats where performance really matters... head to head, $$(".items").get("id") vs document.getElements(".items") the latter wins. interestingly, this made me discover a FF4 bug in mootools: jsperf.com/ff4-mootools-slick-test/2 - whereby .item over-performs. in all other browsers, its reversed
$$ without worrying about performance.. your 2nd point is true, is easier for the browser to find more specific selectors but that doesn't mean that using $$ is slower.. besides i've added a new test using $ and getChildren and it was the fastest (except on IE).. and finally the question had "mootools" written on the title and in the tags XD But i've learned a few thing from your comment Thxs Cheers!!$$ is now frowned upon and discouraged as a best practice (just like any of the other $-based constructs that got deprecated in 1.3) and it is being kept on for legacy's sake - you won't find a single call to $$ in mootools-core (but it's still in mootools-more). The real drama IS performance in browsers like IE where you don't have any shortcuts Slick can use like getElementsByClassName and querySelectorAll. For the new gen browsers, selector speed is deemed 'high enough' anyway.