jQuery DOM Traversing Iterating over list of jQuery elements
Example
When you need to iterate over the list of jQuery elements.
Consider this DOM structure:
<div class="container">
<div class="red one">RED 1 Info</div>
<div class="red two">RED 2 Info</div>
<div class="red three">RED 3 Info</div>
</div>
To print the text present in all the div elements with a class of red:
$(".red").each(function(key, ele){
var text = $(ele).text();
console.log(text);
});
Tip: key is the index of the div.red element we're currently iterating over, within its parent. ele is the HTML element, so we can create a jQuery object from it using $() or jQuery(), like so: $(ele). After, we can call any jQuery method on the object, like css() or hide() etc. In this example, we just pull the text of the object.
