Use for loop in jQuery instead of $.each()?

jQuery's $.each() method works with both objects and arrays. You can use a JavaScript for loop to iterate through arrays, and a JavaScript for in loop to iterate through objects.

If you are using jQuery you can use either the $.each() method or a for loop to iterate through an array. I don't believe there's a particular advantage to one technique over the other.

Hi Hilary Lee,

jQuery's .each() is very fast so, performance-wise, you'd be safe picking either one in most situations. A good rule to follow is to use jQuery's each method when you're working with jQuery data like a selector that returns multiple elements.

Here's an example where I have a jQuery object (a bunch of blog post containers) and I'd like to append a note to each.

for loop / jQuery object hybrid:

for(i = 0; i < $(".blog-post").length; i++) { 
  $(".blog-post:eq(" + i  + ")").append("<p>Here's a note</p>");
}

That gets the job done, but it's tough to follow and ignores some of the value provided by jQuery. Let's try a full jQuery example, with .each() as the iterator.

$(".blog-post").each(function() { 
  $(this).append("<p>Here's a note</p>");
});

Much easier to read, and probably even faster!

Both of these examples work just fine, but in this case I would go with jQuery for the code clarity, and abstraction that jQuery has provided.

is it possible to use for loop instead $.each() in this example?

$(document).ready(function () {
  $.getJSON('../video7/data/rooms.json', function (data) {
    var statusHTML = '<ul class="rooms">';
    $.each(data,function (index, room) {
      if (room.available === true) {
        statusHTML +='<li class="empty">';
      } else {
        statusHTML +='<li class="full">';
      }
      statusHTML += room.room + '</li>';
    });
    statusHTML += '</ul>';
    $('#roomList').html(statusHTML)
  }); // end getJSON
}); // end ready