CODEWITHSUNDEEP
jqueryiteration
Shamoon
Shamoon

Reputation: 43617

How do I iterate through children elements of a div using jQuery?

I have a div and it has several input elements in it... I'd like to iterate through each of those elements. Ideas?

Upvotes: 319

Views: 490175

Answers (8)

Andy E
Andy E

Reputation: 344803

Use children() and each(), you can optionally pass a selector to children

$('#parentid').children('.childclass').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

You could also just use the immediate child selector:

$('#mydiv > input').each(function () { /* ... */ });

Upvotes: 580

KarolSVK
KarolSVK

Reputation: 1

It's working with .attr('value'), for elements attributes

$("#element div").each(function() {
   $(this).attr('value')
});

Upvotes: -1

Umar Asghar
Umar Asghar

Reputation: 4064

It can be done this way as well:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});

Upvotes: 8

Surya
Surya

Reputation: 1091

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

This iterates through all the children and their element with index value can be accessed separately using element and index respectively.

Upvotes: 15

tomloprod
tomloprod

Reputation: 7890

If you need to loop through child elements recursively:

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));

NOTE: In this example I show the events handlers registered with an object.

Upvotes: 22

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15377

I don't think that you need to use each(), you can use standard for loop

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

this way you can have the standard for loop features like break and continue works by default

also, the debugging will be easier

Upvotes: 4

Dan185
Dan185

Reputation: 356

children() is a loop in itself.

$('.element').children().animate({
'opacity':'0'
});

Upvotes: 1

Liquinaut
Liquinaut

Reputation: 3807

It is also possible to iterate through all elements within a specific context, no mattter how deeply nested they are:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

The second parameter $('#mydiv') which is passed to the jQuery 'input' Selector is the context. In this case the each() clause will iterate through all input elements within the #mydiv container, even if they are not direct children of #mydiv.

Upvotes: 71

Related Questions