how to loop over the child divs of a div and get the ids of the child divs?

Question

I have a div with id test

and through the foreach loop I am creating some inner divs inside the test div. So it becomes like this.

        
                      

              相关标签:
       
      

Answer 1

You can loop through inner divs using jQuery .each() function. The following example does this and for each inner div it gets the id attribute.

$('#test').find('div').each(function(){
    var innerDivId = $(this).attr('id');
});

Answer 2

You can use

$('[id^=test-]')

and each()

this way for example :

$('[id^=test-]').each(function(){
    var atId = this.id;
    // do something with it
});​

Answer 3

What you are trying to do is loop through the direct-descendant divs of the #test div; you would do this using the > descendant selector, and the jQuery .each() iterator. You can also use the jQuery .css() and .attr() methods for styling and retrieving the id respectively.

$("#test > div").each(function(index){
    var id = $(this).attr("id");
    $(this).css(/* apply styles */);
});

Answer 4

Try this

var childDivs = document.getElementById('test').getElementsByTagName('div');

for( i=0; i< childDivs.length; i++ )
{
 var childDiv = childDivs[i];
}

Answer 5

Use jQuery.

This code can be addapted to your needs:

$testDiv = ​$('div#test')​​​​​​​​​​​​.first();    
$('div', $testDiv).css("margin", '50px');​​​​

Answer 6

Here's the solution if somebody still looks for it

function getDivChildren(containerId, elementsId) {
    var div = document.getElementById(containerId),
        subDiv = div.getElementsByTagName('div'),
        myArray = [];

    for(var i = 0; i < subDiv.length; i++) {
        var elem = subDiv[i];
        if(elem.id.indexOf(elementsId) === 0) {
            myArray.push(elem.id);
        }
    }
    return myArray;
}
console.log(getDivChildren('test', 'test-'));