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个单词。但li中包含大量文字的div.text项也是如此。

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

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

Answer 1

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

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

设置高度

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

为了遍历页面上的tekst元素，您可以使用.each（）;

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

希望有所帮助。

Answer 2

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

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

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

Answer 3

你真的不会用javascript设置高度，而是使用CSS。您可以创建定义该类的类，并将其应用于类似的内容。

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

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

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

Answer 4

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

其他选择：

指定固定高度和overflow: hidden以确保较大的div不会泄漏。将一个onmouseover事件添加到div并显示完整版本。
只需为所有DIV指定一个很高的高度
并排渲染所有DIV，然后使用JavaScript将容器的高度分配给所有DIV（容器将获得最高子级的高度）。

Answer 5

来自jQuery 'Plugin Authoring' page，这是一个方便的插件：

(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');

把.height放在数组中？

5 个答案: