div元素中的.each(),找到一个子元素,根据其内容设置高度(高级?)

时间:2011-10-19 12:18:42

标签: jquery

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

我正在尝试循环通过一个div(主要)组合divs(孩子),在那个div我得到了部分(孩子),在那个部分我得到了一个h2。

现在基于h2中获得最多内容的内容,我使用jQuery库设置其他h2的高度:http://www.tomdeater.com/jquery/equalize_columns/

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

最好检查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; }

3 个答案:

答案 0 :(得分:11)

我使用了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);
});

答案 1 :(得分:4)

达累斯萨拉姆,

你必须循环两次:第一次找到最高数字H2,第二次调整其他H2s的高度。让我们这样做:

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

不过,我想知道上述情况是否可以优化。

答案 2 :(得分:1)

看看http://jsfiddle.net/CbNRH/39/,我认为没有.equalizeCols()

这是处理这个问题的最好办法

查看http://jsfiddle.net/CbNRH/38/,我认为这是使用.equalizeCols()

处理此问题的最佳方式