jquery find the longest height dynamically to set height to all siblings in div

I am currently trying to figure out how to set the height of all sibling p elements in a div by finding the height of the longest p element in that div dynamically without setting the maximum height, got the code from here

I would like to set the height dynamically to the longest p dynamically as I don't know the height of the longest p

here is the code

$(document).ready(function() {
    setHeight('.col');
});



//global variable, this will store the highest height value
var maxHeight = 100;

function setHeight开发者_开发百科(col) {
    //Get all the element with class = col
    col = $(col);

    //Loop all the col
    col.each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

    //Set the height
    col.height(maxHeight);
 }

if someone knows how to do this that would be great

I have a raw javascript solution below but it has to be jquery

function parseRightTabs() {
    var height = 20;
    var ht = 0;
    for(var i=1; i<5; i++) {
        ht = Od('rTest'+i).offsetHeight;
        if(ht>height) height = ht;
        if(i>1)Od('rTest'+i).style.display='none';
    }
    if(height < 50) height = 112;
    Od('rTests').style.height = height + 'px';
    Od('rtShow2').style.display = Od('rtShow3').style.display=Od('rtShow4').style.display = 'none'; 
}

Hope someone can help

here is the link, if you click on testimonials in the right hand section and click 1, 2 or 3

here is the js fiddle

http://jsbin.com/owiju5/2/edit

---

Try this out --

var $paragraphs = $('div p');

var heights = $paragraphs.map(function() {
   return $(this).height();
});

var maxHeight = Math.max.apply(this, heights);

$paragraphs.height(maxHeight);

---

There is a plugin to do that: Equal Column Heights

However in principle your code should do something like this:

$elems = $('.my_columns');
var max_height = 0;
$elems.each(function(idx, elem) {
  max_height = Math.max(max_height, $(elem).height());
});
$elems.height(max_height);

---

There is a jQuery plugin for setting the height of columns that would make this very easy.

http://brenelz.com/blog/jquery-custom-plug-in-equal-height-columns/

---

I think you will have to loop twice. Once to get the highest value and then again and set all the heights to that value.

So something like

...

$(".col").each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

$(".col").each(function() {       
        $(this).height(maxHeight);
    });

...

---

This is simple code

var heights = $("element").map(function ()
{
return $(this).height();
}).get(),

MaxHeight = Math.max.apply(null, heights);

or

var highest = null;
 var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
 if(h > hi){
 hi = h;
 highest = $(this);  
 }    
});

highest.css("background-color", "red");

---

You can extend jQuery to have a matchHeight() method. Note these steps:

1. We must call this only after $(window).load() is finished because otherwise the maximum height readings will be wrong.
2. Then, the overflow:hidden causes our column elements to snap their height to their contents, but only works if their width is set, and most floating column widths are usually set as a general good practice. This is important to do or otherwise your $(this).height() reading will be 0 in some cases.
3. Then, when we finally get to the last column, we use the Math.max.apply() trick to find the largest column height. However, that trick only works if we have our selector, and the o variable goes to a single column elements, not all the column elements. So, we utilize the selector property to get that.
4. Then, again, we have to use the selector property in order to grab all the siblings and set their height. Note that I tried this with o.siblings() instead of $(o.selector), but that failed to work.

(function($) {
$.fn.extend({
  matchHeight: function() {
    var o = $(this);
    o.css('overflow','hidden');
    if (o.is(':last-child')) {
      var nMaxH = Math.max.apply(null,$(o.selector).map(function(){return $(this).height();}).get());
      $(o.selector).height(nMaxH);
    }
  }
});
})(jQuery);

$(window).load(function(){
  // The .row .col below is DIV P in your case, where DIV = .row and P = .col
  $('.row .col').matchHeight();
});