How do I iterate through children elements of a div using jQuery?
JqueryIterationJquery Problem Overview
I have a div and it has several input elements in it... I'd like to iterate through each of those elements. Ideas?
Jquery Solutions
Solution 1 - Jquery
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 () { /* ... */ });
Solution 2 - Jquery
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.
Solution 3 - Jquery
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.
Solution 4 - Jquery
$('#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.
Solution 5 - Jquery
It can be done this way as well:
$('input', '#div').each(function () {
console.log($(this)); //log every element found to console output
});
Solution 6 - Jquery
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
Solution 7 - Jquery
children() is a loop in itself.
$('.element').children().animate({
'opacity':'0'
});
Solution 8 - Jquery
It's working with .attr('value'), for elements attributes
$("#element div").each(function() {
$(this).attr('value')
});