Introduction to Programming Concepts via jQuery

Loops!

We've already seen how to apply a jQuery function to everything on the page that matches a particular selector. Remember this (what does it do?):

  $j(".make-me-yellow").removeClass('bg-purple').addClass('bg-yellow');

Type the code into your developer console to check your idea. (Don't forget the var $j = jQuery.noConflict(); first.)

That is super rad if you want to do the same thing to everything in a set. But what if you'd like to look at each item individually, and make choices...?

You can do this with a loop. As the term suggests, loops cycle through every element of a set, looking at them one at a time. You can apply whatever rule(s) you like to each one.

Your turn!

What are some everyday processes that are secretly loops?

Loops in action

Let's rewrite the code above as a loop. (Important programming fact: there's usually more than one working way to write a program! In other words, there's no one right answer.)

  $j(".make-me-yellow-loop-version").each(function() {
    $j(this).removeClass('bg-purple').addClass('bg-yellow');
  });

Type this into your developer console. It should do exactly the same thing as the previous code, except on this set of buttons.

An important new thing we see here is $j(this). As you might guess, this means "this item that we're looking at right now - the one we're doing stuff to this time through the loop".

this is a reserved word in JavaScript; that means the language reserves it for its own uses, and you shouldn't name any of your own variables or functions "this". If you do, the computer will probably get confused in unpredictable (and hard-to-debug) ways. Use this only for its intended purpose; come up with more descriptive names for the functions and variables that you define.

Your turn!

Rewrite the following statements to use loops. Don't forget - decide first what you think each loop will do!

  $j(".make-me-green").removeClass('bg-purple').addClass('bg-green');

  $j(".append-to-me").append("and a pony");

(Wait, .append( ) is new! Can you describe what it does? Do you see why having thoughtful names for your functions and variables makes everyone's lives easier?)

(As ever, you can read complete documentation for .append( ) at http://api.jquery.com/append/.)

  $j(".make-me-uppercase").addClass("text-uppercase");

More useful loops

Yay, you've written your first loops! But you might have been asking...why did we need to do that instead of just writing things the old way?

And you'd be right. The real power of loops comes when you might need to make decisions about each item in the loop. That's what makes loops better than Dr. Badplan. So let's look at a situation where we need to make decisions.

What will this code do?

  $j(".conditional-loops-1").each(function() {
    if ( $j(this).hasClass("bg-yellow") ) {
      $j(this).removeClass("bg-yellow").addClass("bg-green");
    } else if ( $j(this).hasClass("bg-green") ) {
      $j(this).removeClass("bg-green").addClass("bg-yellow");
    }
  });

One more example. This uses a new function, .html( ). .html( ) can do two things:

• Without an argument, .html( ) returns the HTML contents of the element under consideration. If myDiv equals <div><p>stuff</p></div>, then myDiv.html() equals <p>stuff</p>.
• With an argument, .html( ) replaces the element's contents with that argument. So myDiv.html('kittens') removes <p>stuff</p> and fills myDiv with kittens. Yay!

As always, you can read the full documentation at http://api.jquery.com/html/.

What will this example do?

  $j(".conditional-loops-2").each(function() {
    if ( $j(this).html().indexOf('kittens') > -1 ) {
      $j(this).addClass("kitten-button");
      $j(this).html(" ");
    }
  });

Your turn!

Write a program that does the following:

• Loops through the books in the following list (each title is in a span class="practice-loops");
• ...and, if the book is by James S.A. Corey...
• ...adds it to the div whose id is holds-list.

If you still have time, do whichever of the following sounds more fun:

• Think back to those everyday processes that are secretly loops. How would you write a set of rules to tell a computer how to do some everyday process? (Especially if it's a process that you do using a computer, but not with a one-click program - something that requires a lot of repetitive steps.) Don't worry about getting the syntax correct, or the fact that you don't know a ton of functions yet. Write pseudocode. Talk it over with your neighbor. See if you agree.
• Real-world records are often kinda messy. Look at the title list below. Which titles would your program work for? Which wouldn't it work for? Why not? How would you need to update your code to make it work on this list? (If you want to try writing the code, or it'll be easiest for you to answer the question with some learning-by-doing, go right ahead!)
• Note: the ID of the holds-list div below is holds-list-2. (It needs to be different from the ID of the holds list div above, because we can only have one object with a given ID per page.)
• It also uses practice-loops-2 instead of practice-loops to avoid interactions with the previous example.

previous next