While Loop with JQuery

TAGs: 11 Comment

Posted By: eligeske on in JQuery

So you want to loop through some elements using JQuery. Me too! We have something in common, maybe we should go have a beer together. Bud light anyone? just kidding. (about the bud light, ik.)

There is some important things when trying to loop through elements with JQuery.

  1. Need to get an array of elements OR use .each function (but there can be some issues there)
  2. Loop through those elements

First: Assigning elements to an array.

I want everyone to know right now that I am by far an expert on this subject, but…… but….. I do think this may help someone out. If you have some good feedback or improvements please comment below! The more good info the marry’er!!!!! <– is that a word? anyways.



  1. var divs = $('divs');
  2. var rows = $('.container .row'); // assigns all class with rows

Once you have that assigned you can get the .length value for looping through. This is different than using the .get() which uses the dom and not JQuery. So for this writeup I will be using the JQuery .eq() function which allowed me to grab out of the array from a JQuery object.

  1. $cnt = $row.length // returns count obviously

Now that we have a count of how many are in the array we can do a while loop. (using .eq) and not the .get() which would look like this $row[1]. Instead what we will do will look like this $row.eq(1);. What I used this for was to determine the height of my left column and hide rows that extended the height of the main column past the height of the left. But this is only a portion of that. Here is how i looped through and hid some rows.

$i = $cnt -1;
 while($i > 0){
     rows.eq($i).slideUp(); // slides up all the rows


Ok. I’ll tell you why, or at least a partial why. Here is the partial why.

When using the .each function it appeared that it did not do a full iteration and complete all the code sequentially. For some reason, here is the partial I can’t cover yet, the .each function iterated each part in the enclosed function at the same time not allow me to determine things in between each loop. Which forced me to learn how to traverse the JQuery object. Which is good because using this way was WAY less code than I was about to write out of my shear laziness.

I hope this has helped someone else out there wanting to loop through some elements. Oh and here is the code I used to hide some rows that were making the main page container not match the height to the left column. In case you were curious.

function squishBox(){
  var rows = $('.products_cont .row');
  $cnt = rows.length;
  $i = $cnt - 1;
  while($i > 0){
     $left_height = $('#LEFTPANE').height();
     $main_height = $('#CONTENTPANE').height();
     if($left_height < $main_height - 100){

11 Responses to "While Loop with JQuery"

  1. I went looking for a reason why the .each was not working. But your post seemed to confirm a problem.

    Here was what ended up working for me:
    var cnt = jQuery(“.bg-admin-inspect-element-box”, c).length;
    for(var i=1; i<cnt; i++){
    var html = jQuery(“.bg-admin-inspect-element-box:first”, c).html();
    jQuery(“.bg-admin-inspect-element-box:first”, c).replaceWith(html);
    console.debug( jQuery(c).html() );

    Just using the first selector and replacing that element.

  2. eligeske says:

    Thanks for sharing!

  3. Omar J says:

    Excelente solución, tenía el mismo problema exactamente
    Thank you

  4. Pingback: Animated JQuery Bar Chart « eligeske

  5. Almer Almazan says:

    Sir thanks for sharing…. I have a favor because I’m stuck with this kind of copy and pasting my code.
    Is there a way on how to do this in javascript or jquery for loop statement?
    I want to minimize my code..

    $(‘.showHide1′).hide().before(‘<a href=”&#35″ id=”toggle-showHide1″ class=”button”><strong>More info…</strong></a>’);
    $(‘a&#35toggle-showHide1′).click(function() { $(‘.showHide1′).slideToggle(1000);
    return false;

    $(‘.showHide2′).hide().before(‘<a href=”&#35″ id=”toggle-showHide2″ class=”button”><strong>More info…</strong></a>’);
    $(‘a&#35toggle-showHide2′).click(function() { $(‘.showHide2′).slideToggle(1000);
    return false;

    $(‘.showHide3′).hide().before(‘<a href=”&#35″ id=”toggle-showHide3″ class=”button”><strong>More info…</strong></a>’);
    $(‘a&#35toggle-showHide3′).click(function() { $(‘.showHide3′).slideToggle(1000);
    return false;

    Please give me an idea on how to solve this kind of problem… Thanks from Philippines..

  6. eligeske says:

    Yo Almer!

    The best way to minimize the javascript in your case is by streamlining your html so we can then only use one method for the click and a loop for the hide.

    Reply and add your email address so I can get the HTML from you and I would be glad to help :)

  7. That is a great point to bring up. Thanks for the post.

  8. // Use the each() function. You pass a callback as a parameter. You can use it on objects and array as well.

    $(‘.container .row’).each(function(){
    // Use $(this) to access the element.
    /*Extra code*/

  9. eligeske says:

    The .each function is nice. At the beginning of the post you’ll notice that this is an alternative to that. A while back I was running into issues with the .each that didn’t fire the callback method sequentially. It may have been fixed with newer releases.

  10. saipriya says:


    i would like to accept a value from the text box and den find the modulus of number wen divided by 10 till my original number becomes a single digit…

  11. saipriya says:

    i would like to accept a value from the text box and den find the modulus of number wen divided by 10 till my original number becomes a single digit…i have written the following code..i dont know how to proceed further…

    $(document).ready(function() {


    var value = $(this).val();




    Text Input:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post