How do I loop though a jquery function call?

@chestertbMar 09.2012

Hi all,
I have a jquery function that resets the height of divs in columns so that they’re the same height.
The problem is, it will just do a single row.
I have multiple rows, so I want to call the function for each row, setting the height of the divs in that row to the height of the tallest in that row.

the jquery call is
$(document).ready(function(){

$(‘#divname’).equalheight();
});

I want to loop through several divnames like this…
for(x=1;x<=5;x++)
{
box = ‘box’+x;
$(document).ready(function(){

$(‘#’+box).equalheight();
});
}
which, of course, doesn’t work, so I tried this…
$(document).ready(function(){
for(x=1;x<=5;x++)
{
box = ‘box’+x;

$(‘#’+box).equalheight();
}
});

which doesn’t work either.

Any suggestions?

to post a comment

JavaScript

12 Comments(s) _↴

@Ay__351_eMar 09.2012 — #I am new to Jquery.

http://www.eburhan.com/araclar/jquery-yukseklik-esitle/

@chestertbauthorMar 09.2012 — #...and as a supplementary question, at the end of the two floating divs, I have

<div class='cb' style='clear:both'></div>

When my equal height function runs (manually... see above), it checks all the divs within each row div wrapper, which is the two columns plus the above. It then sets the height of those divs to the height of the tallest. The problem is, it sets the above as well, meaning I have two columns of equal height, followed by a blank space of the same height.

I've tried using

 $(document).ready(function(){
   $('.cb').css('height:1px');
   });

and also

 $(document).ready(function(){
   $('.cb').height(1);
   });

but neither work to restore the clearing div to its proper dimension.

Any thoughts here too?

@hyperionXSMar 09.2012 — #I am using the following code the get the same result

Send the elements which you want to have the same height. Elements of the same height will have the same class. In this case, I put class="resize" to all the elements I want to have the same height

[CODE]
 var alignAllBoxesArr = ['resize'];
 [/CODE]

This is the function that calculates the max height

[CODE]
 function alignAllBoxes(){
 if(alignAllBoxesArr){
 for(i in alignAllBoxesArr){
 max = 0;
 $('.'+alignAllBoxesArr[i]).each(function(){
 if(!$(this).hasClass('hide')){
 height = $(this).height('auto').height();
 if( max<height ) max = height;
 }
 })
 $('.'+alignAllBoxesArr[i]).height(max)
 }
 }
 }
 [/CODE]

Make sure to call it at window onload

[CODE]
 $(function(){
 alignAllBoxes()
 })
 [/CODE]

Didn't had time to make it a jQuery plugin yet.

@chestertbauthorMar 09.2012 — #Thanks Ayse, but that still doesn't tell me how to cycle through several rows of heights, though it might have given me a tip on how to avoid the second problem (so thanks for that!).

@chestertbauthorMar 09.2012 — #Thanks HyperionXS.

I'd already modified Ayse's suggestion. (Thanks again Ayse.)

Here's the jquery...

(function($){$.fn.setHeight=function(){

var elems = this.length;

var boxheight = this.eq(0).height();

for(i=1;i<elems;++i){

var currHeight = this.eq(i).height();

if(currHeight>boxheight){

boxheight = currHeight

}

}

this.height(boxheight);

return this}

})(jQuery);

saves as jquery-setheight.js

and in the document

<script type='text/javascript' src='/javascript/jquery-setheight.js'></script>

<script type='text/javascript'>



</script>

where bxx1 is the div class name

Now all I have to do is figure out how to loop though bxx1, bxx2, bxx3 etc.

Any suggestions?

@DanInMAMar 09.2012 — #why in the world are you doing it like that?

If you want to use it on more than one element,

[CODE]$(document).ready(function(){ 
 $('#divname,#divname2,#divname3').equalheight();
 });[/CODE]

or if you have mutiple divs that only begin with part of the same name you could do this.

lets say they all start with mydiv, like mydiv1, mydiv1, etc...

then you coul ddo this

[CODE]$(document).ready(function(){ 
 $('div[id^="mydiv"]').equalheight();
 });
 [/CODE]

this would apply the plugin to any div with an id that starts with "mydiv"

- take a look at this page to find out more about jquery's awesome selectors http://api.jquery.com/category/selectors/

@Ay__351_eMar 09.2012 — #message box displays what is happening

 <br/>
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;style type="text/css"&gt;
 body {
 background-color: #eee;
 font: normal 13px/18px Tahoma;
 color: #333;
 }
 
 div#dugmeler{ 
 float: left;
 display: block;
 margin-bottom: 50px;
 }
 div#dugmeler button{ 
 font-size: 15px;
 cursor: pointer;
 margin-right: 50px;
 }
 button#new{color: maroon;}
 
 
 
 div#kutular{ 
 float: left;
 display:block;
 clear:left;
 }
 div.box{
 width: 175px;
 padding: 5px 10px;
 background-color: #fff;
 -moz-border-radius: 10px;
 float: left;
 margin: 15px;
 border: 1px solid #ddd;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 
 /* http://www.eburhan.com */
 
 (function($){$.fn.yukseklikEsitle=function(){
 alert(this); // [object Object]
 alert(this.length);  //4
 alert( this.height() ); // 322
 var nesneSay=this.length;
 var enYuksek=this.eq(0).height();
 this.eq(0).css('color','blue');
 alert(enYuksek); // 322
 for(i=1;i&lt;nesneSay;++i){
 var currHeight=this.eq(i).height();
 
 this.eq(i).css('color','red');
 alert(currHeight); // s&amp;#305;rayla 116, 411, 219
 
 if(currHeight&gt;enYuksek){enYuksek=currHeight}
 }
 alert( this.height() ); // 322
 this.height(enYuksek);
 alert( this.height() ); // 411
 return this
 }
 })(jQuery);
 
 <i>    </i>function newHeights(){
 <i>    </i>    $('div.box').yukseklikEsitle();
 <i>    </i>}
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="dugmeler"&gt;
 
 <i>    </i>&lt;button type="button" id="new" onclick="newHeights();"&gt;&lt;strong&gt;Y&amp;#252;kseklikleri E&amp;#351;itle&lt;/strong&gt;&lt;/button&gt;
 &lt;/div&gt;
 
 &lt;div id="kutular"&gt;
 &lt;div class="box"&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 
 <i>    </i>&lt;/div&gt;
 <i>    </i>&lt;div class="box"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>&lt;/div&gt;
 <i>    </i>&lt;div class="box"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p align="center"&gt;&lt;img src="http://www.eburhan.com/wp-content/themes/eburhan2/i/rozet.png" width="77" height="76" alt="rozet-eburhan" /&gt;&lt;/p&gt;
 <i>    </i>&lt;/div&gt;
 
 <i>    </i>&lt;div class="box"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>&lt;/div&gt; 
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

$('.bxx1,.bxx2,.bxx3').yukseklikEsitle();

$('div[class^{^="bxx"]').yukseklikEsitle();}

I try DanInMa's suggestions:

 <br/>
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;style type="text/css"&gt;
 body {
 background-color: #eee;
 font: normal 13px/18px Tahoma;
 color: #333;
 }
 
 div#dugmeler{ 
 float: left;
 display: block;
 margin-bottom: 50px;
 }
 div#dugmeler button{ 
 font-size: 15px;
 cursor: pointer;
 margin-right: 50px;
 }
 button#new{color: maroon;}
 
 
 
 div#boxes{ 
 float: left;
 display:block;
 clear:left;
 }
 div.kutu,#divname,#divname2,#divname3{
 width: 175px;
 padding: 5px 10px;
 background-color: #fff;
 -moz-border-radius: 10px;
 float: left;
 margin: 15px;
 border: 1px solid #ddd;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 
 /* http://www.eburhan.com */
 
 (function($){$.fn.yukseklikEsitle=function(){
 
 var nesneSay=this.length;
 var enYuksek=this.eq(0).height();
 
 for(i=1;i&lt;nesneSay;++i){
 var currHeight=this.eq(i).height();
 
 if(currHeight&gt;enYuksek){enYuksek=currHeight}
 }
 
 this.height(enYuksek);
 
 return this   <br/>
 }
 })(jQuery);
 
 
 
 $(document).ready(function(){ 
 
 // $('#divname,#divname2,#divname3').yukseklikEsitle(); // worked
 $('div[class^="bxx"]').yukseklikEsitle();  // worked
 //$('.bxx1,.bxx2,.bxx3').yukseklikEsitle();  // worked
 //$('div[id^="divname"]').yukseklikEsitle();    // worked
 //$('#boxes &gt; [id^="divname"]').yukseklikEsitle();  //worked
 //$('#boxes&gt;[id^="divname"]').yukseklikEsitle();  //worked
 //$('.bxx1[id="divname"],.bxx2[id="divname2"],.bxx3[id="divname3"]').yukseklikEsitle();  // worked
 });
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 
 &lt;div id="boxes"&gt;
 &lt;div class="bxx1" id="divname"&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 
 <i>    </i>&lt;/div&gt;
 <i>    </i>&lt;div class="bxx2" id="divname2"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>&lt;/div&gt;
 <i>    </i>&lt;div class="bxx3" id="divname3"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;&lt;p align="center"&gt;&lt;img src="http://www.eburhan.com/wp-content/themes/eburhan2/i/rozet.png" width="77" height="76" alt="rozet-eburhan" /&gt;&lt;/p&gt;
 <i>    </i>&lt;/div&gt;
 
 <i>    </i>&lt;div class="kutu"&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
 <i>    </i>&lt;/div&gt; 
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@Ay__351_eMar 10.2012 — #

 
 &lt;script type="text/javascript"&gt;
 
 $(document).ready(function(){ 
 var d = $('div[class^="bxx"]');
 d.height((function(){
 var tallest = $(d[0]).height();
 for(var i=1; i&lt; d.length; i++) {
 var h= $(d[i]).height()
 if(h &gt; tallest) { tallest=h}
 }
 return tallest;
 })()
 )
 });
 
 &lt;/script&gt;

@chestertbauthorMar 10.2012 — #DanInMA, I'm not sure I understand.

Will your solution set all the cells to the same height, or will it set the cells in each row to the same height. I'm trying to achieve the latter.

Go to www.kevinrudd.info, one of the sites built with all of this, where you'll see what I mean.

I've adapted, rather clumsily, Ayse's solution (thanks again), but now the issue comes back to the problem of cycling through each set of rows.

My sloppy workaround looks like this...

[code=html]if(nx>0)
 {
 $(document).ready(function(){
 $('div.bxx1').setHeight();
 });
 }
 if(nx>1)
 {
 $(document).ready(function(){
 $('div.bxx2').setHeight();
 });
 }[/code]

etc up to nx>8, where nx is the number of rows in the table. The problem, of course, is that (apart from being really bad code) if there are more than 8, it will stop working.

I could let my php place the above function call after each row but that's still sloppy.

I therefore needed to do something like this...

[code=html]
  $(document).ready(function(){
 for(x=1;x<=nx;x++)
 {
 box = 'div.bxx'+x;
 $(box).setHeight();
 }
 });
 [/code]

I'd written this post suggesting that this didn't work, but I'd made an error in the working version that I've just picked up so problem solved. The above for/next loop works.

Thanks to all for your time on this. It's much appreciated.

CTB

@Ay__351_eMar 11.2012 — #If I understand

<table id="mytable" ...

 <br/>
 $('#mytable tr:lt(8)').each(function(x){ 
 $(this).find('div.bxx'+(x+1)).setHeight();  <br/>
 });

 <br/>
 var tr = $('#mytable tr');
 var L = tr.length;
 alert( L )
 var n = (L&gt;8) ? 8 : L;
 alert(n);
 
 $('#mytable tr:lt('+n+')').each(function(x){ 
 $(this).find('div.bxx'+(x+1)).setHeight();  <br/>
 });

@chestertbauthorMar 11.2012 — #Thanks Ayse.

I'll stick with your original fix on the divs.

Much appreciated.

Cheers

CTB

@DanInMAMar 12.2012 — #you guys are making it way more complicated than it has to be.

The methods I show you target each element that you the inner elements to be of equal height. I was merely showing various ways that the jQuery library allows you to target elements using advanced selectors instead of all that spaghetti code.

Also in #JavaScript _↴

Frameset, window.status and Netscape Need some help.Encryption help

Success!

Help @chestertb spread the word by sharing this article on Twitter...

Tweet This

How do I loop though a jquery function call?

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I loop though a jquery function call?

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴