Put .height in array?

I have a jQuery carousel with this HTML:

<ul>
    <li>
        <img src="afbeelding.png" alt="afbeelding" />
        <div class="tekst">
            <p>Tewefjwoejgi wjgiowje iogjwioej goiwejgioj woegjio</p>
        </div>
    </li>
    <li>
        <img src="afbeelding.png" alt="afbeelding" />
        <div class="tekst">
            <p>Tewefjwoejgi wjgiowje iogjwewdg iowejgio jwoiegj oiwjoegioej goiwejgioj woegjio</p>
        </div>
    </li>
</ul>

But the user of the website can set text in the 开发者_如何学编程div class tekst. Now i have li items with 2 words in the div class text. But also li items with a lot of text in the div.text.

The div class text has a background color. I want make every div the same height.

How can I achieve this with Javascript or jquery? That is, the div class tekst has the height of the biggest div class tekst?

From the jQuery 'Plugin Authoring' page, there's this handy plugin:

(function( $ ){

  $.fn.maxHeight = function() {

    var max = 0;

    this.each(function() {
      max = Math.max( max, $(this).height() );
    });

    return max;
  };
})( jQuery );

Which takes a set of elements and returns the height of the tallest. Use it like this:

$('div.tekst').height($('div.tekst').maxHeight() + 'px');

You will need to grab all the $('.tekst') elements on the page, and find the largest height, using var myHeight = $('.tekst').height();

You can then set the height using $('.tekst').height(myHeight);

Then you can still use carousel once you have done the above calculations.

In order to iterate through the tekst elements on the page, you can use .each();

Reference: http://api.jquery.com/each/

Hope that helps.

Not entirely clear on what you're trying to achieve but in guessing, why not use CSS?

.BiggestDivClass
{
    height:64px; /* replace with the desired height */
    max-height:64px; /* play it safe? */
}

Unless your existing scripts manipulate styles at runtime, this could well suffice.

You really wouldn't set the height with javascript, but with CSS. You can create class that defines that and apply it with something like.

$('div').addClass("heightClass");

or you could apply the style attributed.

$('div').attr("style", "height:100px;");

With plain CSS, it's hard to create elements with the same height unless you can use a table or display: table-cell.

Other options:

1. Assign a fixed height and overflow: hidden to make sure the bigger divs don't leak. Add a onmouseover event to the divs and show the full version then.

2. Just assign a big height to all DIVs

3. Render all DIVs side by side and then assign the height of the container to all of them with JavaScript (the container will get the height of the tallest child).