jquery each

http://api.jquery.com/each/

please take a look at example2, what's the difference between these two methods?
<script>
     $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });
 
	 $("span").click(function () {
      
        $('li').toggleClass("example");
      
    });
	
	
</script>

Open in new window

charmingduckAsked:
Who is Participating?
 
dsmileConnect With a Mentor Commented:
.each( function(index, Element) ) Returns: jQuery

Description: Iterate over a jQuery object, executing a function for each matched element.


This code
$("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

Open in new window


Will do toggleClass to each of "li" found in "span" by looping throuhg the "li" list.
This means you can do something else with each of these "li" individually.

While this code
$("span").click(function () {
      
        $('li').toggleClass("example");
      
    });

Open in new window

will do toggleClass for ALL the "li" found
0
 
charmingduckAuthor Commented:
sorry, by

$("span").click(function () {
     
        $('li').toggleClass("example");
     
    });

I actually meant
$("span").click(function () {
     
        $('span li').toggleClass("example");
     
    });



and when you say something else with each of these "li" individually, do you mean like this? am I understanding this correctly? is this the major advantage or difference? or maybe can you show me an example that in some cases it'd be better to choose each over simply using the all ** ?

$("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
       $(this).somethingelse();
      });
    });
0
 
Gurvinder Pal SinghCommented:
There is no difference as far as functionality is concerned. Both will toggle class 'Example' of li, in case any span is clicked
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
You can't do something like that :
      $("li").each(function(){
          $(this).toggleClass("example");
          $(this).somethingelse();
          alert("ok");
          function1();
          function2();
      });
without a loop (using $.each or $.map... while, for, do...)
0
 
dsmileConnect With a Mentor Commented:
@charmingduck:

first of all, your new code doesn't work

$("span").click(function () {
     
        $('span li').toggleClass("example");
     
    });


second, yes, that's what I mean, but specifically, it allows you to do this (do distinguish with ALL)

$("span").click(function () {
     
       $('li').each(function(index) {
    if (index % 2 == 0)
    {
      alert('you cant do this with second case'); // this message shows each 2 item
    }
  });
     
    });


0
All Courses

From novice to tech pro — start learning today.