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

The best answers to the question “How do I iterate through children elements of a div using jQuery?” in the category Dev.


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


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.


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

$('#mydiv').children('input').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 () { /* ... */ });


$('#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.


If you need to loop through child elements recursively:

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

// Parent div

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