Looping Through a Set of Selected Results - J Query

Problem
You need to create a list from your selected set of DOM elements, but performing any action on the selected set is done on the set as a whole. To be able to create a list with each individual element, you’ll need to perform a separate action on each element of the selected set.

Solution

Let’s say you wanted to make a list of every link within a certain DOM element (perhaps it’s a site with a lot of user-provided content, and you wanted to quickly glance at the submitted links being provided by users). We would first create our jQuery selection,$("div#posta[href]"), which will select all links with an href attribute within the<div>with the id of post. Then we want to loop through each matched element and append it to an array. See the following code example:

We were able to make an array because we iterated through each element in the jQuery object by using the $().each(); method. We are able to access the individual elements and execute jQuery methods against those elements because we wrapped the this variable in a jQuery wrapper, $(), thus making it a jQuery object.

Discussion

jQuery provides a core method that you can use to loop through your set of selected DOM elements. $().each() is jQuery’s for loop, which will loop through and providea separate function scope for each element in the set. $().each(); will iterate exclusively through jQuery objects.
In each iteration, we are getting the href attribute of the current element from the main selection. We are able to get the current DOM element by using the this keyword. We then wrap it in the jQuery object, $(this), so that we can perform jQuery methods/actions against it—in our case, pulling the href attribute from the DOM element. The last action is to assign the href attribute to a global array, urls.
Just so we can see what we have, the array URL is joined together with a ,and displayed to the user in an alert box. We could also have added the list to an unordered list DOM element for display to the user. More practically, we might want to format the list of URLs into JSON format and send it to the server for processing into a database.
Let’s look at another example using $().each();. This example is probably the most obvious use of $().each();. Let’s say we have an unordered list of names, and we wan teach name to stand out. One way to accomplish this is to set an alternate background color for every other list item:

Looping-Through-a-Set-of-Selected-Results

Figure : shows the code output.

As we iterate through each <li>element, we are testing whether the current index,which is passed in as a single argument to the function when executed, modded by 2is equal to 1. Based on that condition, we either set one CSS class (.odd) or another CSSclass (.even).
The basic function of $.each(); is to take the matched set and iterate through each element via reference of the index, perform some action, and iterate to the next element in the matched set until there are no more elements left.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics