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

首先，你不能将'height'与list-item一起使用，所以假设你只是试图从4组中获取最高的<li>，这就是你如何使用jQuery。

我们假设这是你的标记：

<ul class="list">
    <li>text<br/><br/>text</li>
    <li>text<br/><br/>text<br/>text</li>
    <li>text</li>
    <li>text</li>
</ul>
<ul class="list">
    <li>a</li>
    <li>a</li>
    <li>aa<br/><br/><br/>aaaa</li>
    <li>a</li>
</ul>

// write a separate function to get height for current element
function thisHeight(){
    return $(this).height();
}

// loop through the elements and get tallest
$("ul.list").each(function(){
     var maxH = Math.max.apply(Math, $(this).find("li").map(thisHeight));
     $(this).find('li').height(maxH);
})

jsfiddle

Answer 2

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

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

然后使用.add()一次选择<li>及其3个兄弟姐妹，并将.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/

获得每四个列表项的最高高度

2 个答案: