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.

ASSIGN ELEMENTS TO AN ARRAY or grab OBJECTs:

examples:

var divs = $('divs');
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.

$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
}

SO HEY YOU! WHY NOT JUST USE THE .each() FUNCTION BUILT INTO JQuery!!!!!

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 &#8211; 100){
rows.eq($i).slideUp();
}
$i&#8211;;
}
}