jQuery .each()
Victor Lee
{C4}
February 23, 2015
I. What is jQuery?
II. What is .each()?
a) $.each() objects and arrays
b) $(selector).each() jQuery object
III. Summary
What is jQuery?
- Client side javascript library that is cross browser compatible.
- It allows you to find elements using CSS style selectors and modify the elements using jQuery methods.
$.each() vs. $(selector).each()
$.each()
- iterates over objects and arrays
$(selector).each()
- iterates over DOM elements
It's the jQuery equivalent of javascript's loop function.
What is $.each()?
the $.each() function is used to iterate over any collection, whether it is an object or an array
$.each(collection, callback(index, value);.each()
If an object is used as the collection, the callback is passed a key-value pair each time:
What is $(selector).each()?
- Iterates exclusively over a jQuery object and executes a function for each matched element
- Performs one or a series of actions on each of the selected elements
- Designed to make DOM looping constructs concise and less-error prone
$(selector).each()
$("li").click(function(){
$('li').each(function(){
$(this).toggleClass("makeitalic");
});
});
1. $('li') is the jQuery selector for the <li> elements
2. .each(function) applies the same code to each element in the selection
3. $(this) refers to the current element <li> and will change the list style
example
$(selector).each()
iterate <li> to change the element styles
Summary
- It's the jQuery equivalent of javascript's loop function.
- $.each() function is used to iterate over any collection, whether it is an object or an array
- $(selector).each() iterates exclusively over DOM elements
Resources
- http://api.jquery.com/each/
- http://api.jquery.com/add/#add-html
- "Javascript & Jquery interactive front-end web development" by Jon Duckett
- https://www.youtube.com/watch?v=4Gb31FkmImA
- https://www.youtube.com/watch?v=67IP2QoNIDc
- https://www.youtube.com/watch?v=Ln2WIosrbf4
- https://www.youtube.com/watch?v=IR0-AxsZL-A
.each()
By vic_lee
