jQuery Run code for every element found

Question

I have a list and am using jQuery to get every LI in the list:

$('ul li')

How do i get it so that I run code after each element is found, but not an event; like this:

$('ul li').code(function() {
    alert('this will alert for every li found.');
});

Whats the best way for me to do this?

Answer 1

$('ul li').each(function() {
    alert('this will alert for every li found.');
});

Answer 2

There are two types of loops within jQuery: explicit and implicit.

Explicit Loops

Explicit loops are loops that you explicitly invoke. If you have an array of values that you want to cycle through, you could use the $.each() method:

$.each( [ '#a', '#b', '#c' ], function( index, value ) {
  $( value ).css("color", "red");
});

jQuery will then cycle through each of the values in your array, and run an anonymous function afterwards. It will pass two values into this function: the current index of the value it's touching, and the value itself. So if we're on our first run through, index will be 0, and value will be '#a'.

So if we started with:

<p id="a">A</p>
<p id="b">B</p>
<p id="c">C</p>

After running our explicit loop, our result would be:

<p id="a" style="color:red">A</p>
<p id="b" style="color:red">B</p>
<p id="c" style="color:red">C</p>

Of course you're not limited to arrays and other hand-crafted collections when using the $.empty() method. You can also chain this method right off your selector (note, technically this is a different $.each() method):

$("ul li").each(function( index ){
  $(this).css("color", "red");
});

This method is specifically for cycling over the jQuery object. Each iteration exposes the current element as this within your anonymous function. So revisiting our earlier example, we could have done the following:

$("#a, #b, #c").each(function( index ){
  $(this).css("color", "red");
});

So for each element matched, we will have our anonymous function executed. jQuery will pass us an index so that we can track our progress through the matched elements. On the first run through, index will be 0, and this will refer to #a. On the second time through, index will be 1, and this will refer to #b.

While explicit loops are enticing, note that they may add unnecessary overhead to your application. jQuery already performs a loop on its own when it has several matched elements. This loop is called an implicit loop, and at times we can use it to accomplish our needs, while boosting performance.

Implicit Loops

Implicit loops are done automatically within jQuery itself, for instance with your code:

$("ul li").css("color", "red");

jQuery performed a loop over all of the matched li elements and set their color to "red". We didn't have to specifically ask for a loop - it just does one implicitly. But suppose "red" was far too simple, and we wanted to interact with each item individually - we can do that by passing in a function as the second argument:

$("ul li").css("color", function( index, value ){
  alert( "We're inside LI number " + index );
  return this.innerHTML;
});

Our function will be passed two arguments by jQuery: an index for the current element, and the current rgb value of the color on that element. You could use either one of these for the internal logic - I'm simply returning the innerHTML of the li. What we return will become the new value for color on this element.

So if our unordered list looked like this:

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

After jQuery's implicit loop finishes, the first li will be red, the second will be green, and the last will be blue.

<ul>
  <li style="color:Red">Red</li>
  <li style="color:Green">Green</li>
  <li style="color:Blue">Blue</li>
</ul>

You can see this online at http://jsbin.com/egihun/2/edit

Depending on what method you're calling, different arguments will be passed to your function. Be sure to study the documentation to know what information is available to you during these implicit loops.