Question

我正在尝试根据它的兄弟姐妹的最高版本在h3上设置一个高度。这一点并不太棘手。但我需要做的是只由某些兄弟姐妹创建它。

我有一个CSS放入3行的列表。每行的最后一个li都有'endRow'类。我想，我需要做的是找到'endRow'，然后使用each（）并返回两个元素并检查h3的高度。有人知道一种简单的（ish）方式吗？

TA

更新这是标记的样本。每个h3的高度不是相同的，只是在每一行

<ul>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 2</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li class="endrow">
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 3</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li class="endrow">
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>

Answer 1

.map()的jQuery文档有一个演示（最后一个），该函数运行良好：

$.fn.equalizeHeights = function(){
 return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}

Answer 2

您可以按如下方式获取元素的高度：

var height = element.offsetHeight;

Answer 3

这里是 jquery插件

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

这对复杂到简单的问题都有好处。

Answer 4

如果没有一些示例标记，则很难完全按照您的要求进行操作。起初我以为你有类似的东西：

<h3>
<li>
<li>
<li class="endRow">
<h3>
<li>
...

你需要查看每个<li>的高度，并将前面的<h3>设置为最高。为此，我会使用prevUntil，例如：

var h=0;
$('.endRow').each(function(){
   $(this).prevUntil($('h3')).each(function(){
       if ($(this).attr('offsetHeight')>h) {
          h = $(this).attr('offsetHeight');
       }
       if ($(this).prev().nodeName == 'H3') {
          $(this).prev().css('height',h);
          h=0;
       }
   })
});

请注意，它只是伪的，完全取决于您的标记。

然后我想也许你的意思是你有多个列，看起来像：

<h3>
<li>                 <li>                  <li>
<li>                 <li>                  <li>
<li class="endRow">  <li class="endRow">   <li class="endRow">

如果是这种情况，那么我会使用nth child selector和一些看起来像的代码：

var h=0;
$('h3 ul').each(function(){
    var first = $(this + "li:nth-child(0)").attr('offsetHeight');
    var second = $(this + "li:nth-child(1)").attr('offsetHeight');
    var third = $(this + "li:nth-child(2)").attr('offsetHeight');
    // do whatever your doing with the heights here
    h=first;
    // if im really awake, this refers to ul, so the prev will be the h3
    $(this).prev().css('height',h);
    });

Answer 5

您可以尝试我前一段时间写的以下功能，应该可以正常工作。

传递容器元素，它会查找您指定的item元素并获取最大高度值，设置容器元素高度。和/或你也可以设置内部元素。

<强>用法：

setHeightMax('ul', 'li', 20,true,'li');

功能：

function setHeightMax(divContainer, lookFor, extraPadding,setInnerContainerHeights, innerContainer) {
    $(function () {
        var tempHeight = 0;
        var containerIDHeight = 0;
        $.each($(divContainer).find(lookFor), function (key, value) {
            tempHeight = $(value).height() + extraPadding;
            if (tempHeight >= containerIDHeight) {
                containerIDHeight = tempHeight;
            }
        });
        $(divContainer).css('height', containerIDHeight + 'px');

        if (setInnerContainerHeights)
            $(divContainer).find(innerContainer).css('height', containerIDHeight + 'px');
    });
}

Answer 6

尝试使用此脚本，如果你想要相同的高度使用“AjaxHeight”类或将AjaxHeight更改为你的类

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
    tallest = thisHeight;
    }
    });

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".AjaxHeight"));
    });

Answer 7

更新：您可以使用任何匹配的选择器创建一个使任何元素等于高度的函数：

$(document).ready(function(){
  function equalHeights(selector) {
    var newHeight;
    var colHeights = [];
    $(selector).css('height', '');// Clear heights first
    $(selector).each(function(){
      var singleCol = $(this).outerHeight();// Get the outerHeight of a single column
      colHeights.push(singleCol);// Push the single height into the array
      newHeight = Math.max.apply(Math,colHeights);// Get the tallest column from the array
    });
    $(selector).css('height', newHeight+'px');// Apply the tallest height to all columns
  }
});

用法：

equalHeights('ul li h3');

jQuery等于高度

7 个答案: