jQuery 等高

Question

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

我有一个 CSS 放入 3 行的列表。每行的最后一个 li 具有“endRow”类。我认为我需要做的是找到“endRow”，然后使用each()并返回两个元素并检查h3高度。有人知道一种简单的方法吗？

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

你需要查看每个

的高度并将前面的

设置为最高。
为此，我将使用 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 子选择器 和一些如下所示的代码：

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