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. 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. 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. 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.