I have some divs that i use as containers, i want to loop over them and then loop over the items in it.
so not $('.stackContainer .stackItem').each( but something like this:
// setup stacks
$('.stackContainer').each(function(containerIndex) {
//console.log($(this));
console.log(containerIndex);
$(this).('.stackItem').each(function(itemIndex) {
console.log(itemIndex);
}
});
Only then working. How is this possible?
Try
$('.stackContainer').each(function(containerIndex) {
//console.log($(this));
console.log(containerIndex);
$(this).find('.stackItem').each(function(itemIndex) {
console.log(itemIndex);
}
});
try find() method:
$('.stackContainer').each(function(containerIndex) {
//console.log($(this));
console.log(containerIndex);
$(this).find('.stackItem').each(function(itemIndex) {
console.log(itemIndex);
}
});
Many ways of doing this, as other answers have indicated. Here's one solution: http://jsfiddle.net/cezHH/3/
$(".stackContainer").each(function(stackIndex) {
$(this).children().css('class', '.stackItem').each(function(itemIndex) {
$(this).html($(this).html() + "=>" + itemIndex);
});
});
Alternatively, if all you want to do is iterate over all the .stackItem divs in the order in which they appear on the page, and you don't actually care about the parent .stackContainer divs, then you could just do $('.stackItem').each(function(index) { ... });
The reason to nest the loop that iterates over the .stackItem divs is if you want the itemIndex variable to reset to zero each time you switch parent containers.
On a side note, for performance reasons, you should avoid using jQuery's each() if it's possible that the collection will be of any size:
