在div元素中的.each()，找到一个子元素，根据其内容设置高度(高级?) [英] .each() in a div element, find a child element, set height based on its content (advanced?)

问题描述

我需要查找div的每一行，并根据内容最多的h2来确定该行中h2的高度.

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.

我正在尝试遍历一个包含divs(child)的div(main)，在该div中我获得了section(children)，在该部分中获得了h2.

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.

现在，基于h2中内容最多的内容，我使用jQuery库设置其他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/

我知道一些jQuery，但是我不知道该怎么做.

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

最好检查jsfiddle链接 http://jsfiddle.net/CbNRH/13/.我还没有完成脚本.首先，我试图找到h2元素并写出它的值.然后我以为我会继续前进，但这比我对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.

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

推荐答案

我使用了k.honsali代码并进行了一些简化，因此我的建议如下:

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

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

这篇关于在div元素中的.each()，找到一个子元素，根据其内容设置高度(高级?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！