How to add child tags to a javascript array

Question

I'm trying to fill an array with all direct child elements of a div. example:

<div>
    <span></span>
    <a></a>
</div>

should result in an array containing span and a

How Would I achieve this?

I tried var elements = $('.thediv').children(); but that doesn't seem to work.

Also how Would I then use that information for this kind of function?:

$("element1","element2","element3") depending on the result of the array?

Really thank you for your help! I am kind of lost with this thing

Note: I'm using zepto.js which has a similar syntax to jquery but misses a lot of functions so that might be a problem but I am also happy with solutions using jquery syntax because it should work pretty well :) https://github.com/madrobby/zepto

Answer 1

To get the tags into the array, you could easily use, with jQuery (though I'm unfamiliar with zepto ):

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

JS Fiddle demo .

And to use them, you can try:

for(i=0;i<elementsArray.length;i++){
    $('div').find(elementsArray[i]).css('color','red');
}

JS Fiddle demo .

Although this simply uses the tagName of each element, so if there is more than one a within the relevant element all elements matching the selector, effectively $('div').find('a') in this case, will be targeted by the selector.

The above caution seems to be discounted through use of a more complicated selector, and behaviour, and allows for each element to be iterated over one at a time, though I can't help but feel it's a little more complex than it needs to be:

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

for(i=0;i<elementsArray.length;i++){
    $('div')
        .find(elementsArray[i])
        .not('.edited')
        .eq(0).css('color','red')
        .addClass('edited');
}

JS Fiddle demo .

Sigh , I'm an idiot. The final iteration of this is below, which reduces the complexity somewhat, and allows for proper iteration over each element according to their position in the array:

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

for(i=0;i<elementsArray.length;i++){
    $('div')
        .children()
        .eq(i)
        .css('color','red');
}

JS Fiddle demo .

Having said the above, though, if you want to "target all elements within," why not simply target those elements with:

$('div').children();

Which will select, and target, each direct child of the div element without first holding them in, or having to hold them in, a user-created array variable.

Answer 2

$("div").children().toArray();

http://api.jquery.com/toArray/

$("element1","element2","element3")

Does this mean you want to use the array as a jQuery selector? Or you really want the tag names?

Answer 3

每个DOM节点都有一个childNodes属性，该属性是一个NodeList，包含所讨论节点的所有直接后代。