Another concept video! This is "just one of those thing" you need to understand in jQuery. It is actually a bit unique to jQuery, in that other popular JavaScript libraries in the past have not done it this way.

We've already covered selectors quite a bit. For instance, you already know that $("p") will select all paragraphs on a page. Not just the first one or some random one, all of them. You can easily imagine there may be many of these on a page. Now imagine what happens when you do:

$("p").hide();

All of them get hidden right? Right. Not the first one or some random one, all of them. That implicit iteration. Behind the scenes, jQuery automatically loops through the entire set of elements it found, and runs the method you've chosen on them. We don't literally need to write a loop ourselves to do this. Seems fairly obvious if you're introduction to JavaScript is jQuery, but many libraries in the past have required you to loop over collections of elements yourself.

If you want to, you can still write the loop yourself. That would perhaps look like this, using jQuery looping methods:

$("p").each(function() {
  $(this).hide();
});

That's just about the same thing. Not necessarily, but you could. That's explicit iteration.

Sometimes you need to do explicit iteration. Basically, if we need to access the value of this and do something special with it, we'll need our own loop construct to work with.

The example in this screencast was counting the characters in list items and append that to the end of the string. We'll need explicit iteration for that.

See the Pen 4b53b9f55662d0d26339e18277500eee by Chris Coyier (@chriscoyier) on CodePen

We used jQuery's each() method here which is perfect for what we need. A useful bit it does for us is gives us a zero-indexed counter each iteration we can access if needed.

$(".there-are-three-of-me").each(function(i) {
  
  console.log(i);
  
}); 

// 1
// 2
// 3

Comments

  1. User Avatar
    john@inertiainmotion.com.au
    Permalink to comment#

    Hahaha! The troubleshooting was hilarious. Exactly what I find myself doing until the “duh” moment.

    Definitely good that you kept that as part of the screencast though.

  2. User Avatar
    Kevin Vosper

    That was funny to watch. I’m a noob that makes way too many mistakes to judge, but since I saw it immediately on this one I got a good chuckle. It did make for a good lesson on troubleshooting technique. Comment it out until it works. Great videos by the way.

  3. User Avatar
    Timothy Cole

    I agree, Chris it’s great you keep those mistakes in, as it helps to know how to think it out. Love the way you teach.

  4. User Avatar
    Liam Crean
    Permalink to comment#

    Haha. Amusing end. Great set of videos – making some concepts very easy to understand indeed. Thanks.

  5. User Avatar
    Yakov
    Permalink to comment#

    Why did the explicit iteration (characters counting) stop working when the css method was missing. Shouldn’t those iterations be independent on one another?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag