MOCKSTACKS
EN
Questions And Answers

More Tutorials









Jquery Iterating over list of jQuery elements


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.

Conclusion

In this page (written and validated by ) you learned about Jquery Iterating over list of jQuery elements . What's Next? If you are interested in completing Jquery tutorial, your next topic will be learning about: Jquery Selecting siblings.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.