将 .height 放入数组中？

Question

我有一个带有以下 HTML 的 jQuery 轮播：

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

但是网站的用户可以在 div 类 tekst 中设置文本。现在我有 li 项目，在 div 类文本中有 2 个单词。而且在 div.text 中还有包含大量文本的 li 项目。

div 类文本具有背景颜色。我想让每个 div 具有相同的高度。

如何使用 Javascript 或 jquery 实现此目的？也就是说，div 类tekst 的高度是最大的div 类tekst 的高度？

Answer 1

从jQuery“插件创作”页面，有一个方便的插件：

(function( $ ){

  $.fn.maxHeight = function() {

    var max = 0;

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

    return max;
  };
})( jQuery );

它需要一组元素并返回最高的高度。像这样使用它：

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

Answer 2

您需要抓取页面上的所有 $('.tekst') 元素，并使用 var myHeight = $('.tekst').height() 找到最大高度;

然后，您可以使用 $('.tekst').height(myHeight); 设置高度

。完成上述计算后，您仍然可以使用轮播。

为了迭代页面上的 tekst 元素，您可以使用 .each();

参考： http://api.jquery.com/each/

希望有所帮助。

Answer 3

不完全清楚你想要实现什么，但猜测，为什么不使用 CSS？

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

除非您现有的脚本在运行时操纵样式，否则这就足够了。

Answer 4

你确实不会使用 javascript 设置高度，而是使用 CSS。您可以创建定义它的类并将其应用为类似的东西。

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

或者您可以应用归因的样式。

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

Answer 5

使用普通 CSS，很难创建具有相同高度的元素，除非您可以使用表格或 display: table-cell。

其他选项：

1. 指定固定高度和 overflow:hidden 以确保较大的 div 不会泄漏。向 div 添加 onmouseover 事件，然后显示完整版本。

2. 只需为所有 DIV 指定一个大高度

3. 并排渲染所有 DIV，然后使用 JavaScript 将容器的高度指定给所有 DIV（容器将 。