jquery - 获取每四个列表项的最高高度

Question

我有一个由数据库生成的项目列表，列表项目适合四个到一行，而没有将它们放在用作“行”的元素中>”。所以本质上，它只是一个简单的生成列表，在由于容器宽度而自动换行之前，恰好可以容纳四个列表。

无论如何。

我想获取每个“行”中最高元素的高度，并将其分配给该行中的四个列表元素。

示例:如果我有-

<li height='120'/> 
<li height='140'/> 
<li height='180'/> 
<li height='130'/>

我希望这四个元素的高度均为 180，然后接下来的四个列表元素的高度分别为 200、300、250 和 280，我希望这四个元素的高度为 300。

我已经有了一些代码，我不确定我是否会以正确的方式解决这个问题，但是任何朝着正确方向的插入都将不胜感激......这是我迄今为止所拥有的......

jQuery:

function setListHeight()
{
    var maxHeight = 0,
    halfHeight = 0,
    list = $(".list");

    for( var i = 0 ; i <= $(".list").size() ; i ++ )
    {
        if( i % 4 == 0 )
        {
            $(".list").each(function()
            {
                maxHeight = Math.max($(this).height(), maxHeight);
            });
        }
    }
    list.css({ height : maxHeight });
}

setListHeight();

HTML/PHP:

foreach( $cats as $cat ) 
{
    echo "<li class='list cf'>";
    echo "<h3 id='".$cat['cat_slug']."'>" . $cat['cat_name'] . "<!--<span class='drop_arrow'>></span>--></h3>";
    $subCategories = $this -> categories -> getSubcatsFromParent( $cat[ 'cat_id' ] );

    foreach($subCategories as $sub)
    {
        if( preg_match('/\s/',$sub['cat_name']) )
        {
            $name = strtolower(str_replace(' ', '-', $sub['cat_name']));
        } 
        else 
        {
            $name = $sub['cat_name'];
        }
        echo "<a href='category/".$name."'>" . $sub['cat_name'] . "</a>";
    }

    echo "</li>";
}

Answer 1

您可以使用:nth-child(4n + 1)选择一个<li>每 4 个。

然后使用$(this).nextAll().slice(0,3)选择下 3 <li>每一个<li>选择nth-child() .

然后使用 .add()选择<li>及其 3 个 sibling ，并立即应用 .each()两者都有作用。

结果是:

$('li:nth-child(4n + 1)').each(function(){
    var maxHeight = 0;
    $(this).add($(this).nextAll().slice(0,3)).each(function(){
        maxHeight = Math.max($(this).height(), maxHeight);
    }).height(maxHeight);
});

演示:

http://jsfiddle.net/2Jj8y/3/