jQuery .each() 在 div 元素中，找到一个子元素，根据其内容设置高度（高级？）

.each() in a div element, find a child element, set height based on its content (advanced?)

提问by Dejan.S

I need to find each row of divs, and base the height of the h2s in that row based on the h2 that got the most content.

我需要找到每一行 div，并根据获得最多内容的 h2 来确定该行中 h2s 的高度。

I'm trying to loop through a div(main) that cointain divs(child), in that div i got sections(children) and in that section i got a h2.

我试图遍历一个包含 divs(child) 的 div(main)，在那个 div 中我得到了部分 (children)，在那个部分我得到了一个 h2。

Now based on the content in the h2 that got the most content in it, I set the height of the other h2s with the jQuery library: http://www.tomdeater.com/jquery/equalize_columns/

现在根据 h2 中内容最多的内容，我使用 jQuery 库设置其他 h2 的高度：http: //www.tomdeater.com/jquery/equalize_columns/

I know some jQuery, but not that much that I can figure this out how to do this.

我知道一些 jQuery，但并没有那么多，我可以弄清楚如何做到这一点。

Best is to check jsfiddle link http://jsfiddle.net/CbNRH/13/. I'm not finished with the script. First I'm trying to find the h2 element and write out its value. Then I thought I would move on, but this is more complex than my knowledge of jQuery. Any help is appreciated.

最好是检查 jsfiddle 链接http://jsfiddle.net/CbNRH/13/。我还没写完剧本。首先，我试图找到 h2 元素并写出它的值。然后我想我会继续前进，但这比我对 jQuery 的了解更复杂。任何帮助表示赞赏。

<div id="col-main">
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>2</h2></div></section>
    </div>
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>3</h2></div></section>
    </div>
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>6</h2></div></section>
    </div>
</div>
<div id="write-out"></div>

$('#col-main > div').each(function () {
      var $this = $(this);
      $('#write-out').text($this.child('section').find('h2').val());
});

div.contain { margin-bottom: 10px; background-color: #dddddd; }
div.contain section { padding: 10px; }
div.contain section div h2 { font-size: 12px; width: 80px; background-color: red; }

div#write-out { font-size: 16px; padding: 10px; background-color: #ffcc00; }

回答by John Louros

I took k.honsali code and simplified a bit, so my suggestion is the following:

我拿了 k.honsali 代码并简化了一点，所以我的建议如下：

$('#col-main > div').each(function () {
    var tmpHeight = 0;
    $(this).find("h2").each(function() {
        tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
    });
    $(this).find("h2").height(tmpHeight);
});

回答by k.honsali

Salaam,

萨拉姆，

You have to loop two times: 1st time to find the highest number H2 and second time to adjust the height of the other H2s. let's do it:

您必须循环两次：第一次找到最高的数字 H2，第二次调整其他 H2 的高度。我们开始做吧：

var maxval = 0;
var maxheight = 0;
$('#col-main > div').each(function () {
      tmp = $(this).children().find('h2').val();
      if(tmp > maxval ) {
        maxval = tmp;
        maxheight = $(this).children().find('h2').css('height');
      }
});

$('#col-main > div').each(function () {
      $(this).children().find('h2').css('height', maxheight);
});

Still, I wonder if the above could be optimized.

不过，我想知道是否可以优化上述内容。

回答by noob

Look at http://jsfiddle.net/CbNRH/39/, I think it is the best way to handle this without .equalizeCols()

看看http://jsfiddle.net/CbNRH/39/，我认为这是最好的方法来处理这个没有 .equalizeCols()

---

---

Look at http://jsfiddle.net/CbNRH/38/, I think it is the best way to handle this with .equalizeCols()

看看http://jsfiddle.net/CbNRH/38/，我认为这是用 .equalizeCols() 处理这个问题的最好方法