Question

我在同一个班级中有一个div列表。我想比较它们中的每一个并将高度设置为最高的一个。例如：

<ul>
<li class="items">box1</li>
<li class="items">box2</li>
<li class="items">box3</li>

<li class="items">box4</li>
<li class="items">box5</li>
<li class="items">box6</li>

<li class="items">box7</li>
<li class="items">box8</li>
<li class="items">...</li>
</ul>

到目前为止我发现的是能够在所有列表中找到最高的高度，并使用jquery将每个列表设置为该高度。

function equalHeight(group) {
    tallest = 0;
    group.each(function () {
        thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

        window.onload=(function () {
        equalHeight($('.items'));
});

有没有办法比较列表中的每3个div，并将高度设置为这三个中最高的。

感谢大家的回复。对不起，如果我让你困惑。我发布下面的图片更适合每个人理解。

http://i62.tinypic.com/2e0vayf.jpg

在网页上，box1,2,3在同一行，我想比较哪个框具有最高的高度，并将其他两个框设置为相同的高度。然后box4,5,6在一个新行上，比较这三个并将每个设置为最高。因此，第一行和第二行将具有不同的高度，但它们都在同一类中。在这种情况下，如何将每一行设置为不同的高度，因为该行中的最高框。

Answer 1

您可以遍历每个第3个div并找到接下来的其他2个：

jQuery(document).ready(function($){
    $("ul li:nth-child(3n+1)").each(function(){
        var first = $(this);
        var second = first.next();
        var third = second.next();
    });
});

因此，使用nth-child，您可以获得每个第3个div和2个其他关注者，您可以通过这种方式相互比较。

Answer 2

小孩的作品。但它不是模块化的。如果您希望组大于3，则需要添加2个步骤。这是一个替代代码，允许您更改1个数字并更改分组大小。

JSFiddle

/*Sets up our counting variables*/
var count = 0;
var height = 0;
var groups = 0;
var tallest = 0;
var number_of_items_in_group = 3;
/*grabs the index length of list items*/
var indexL = $('li').length;
/*Every li item is looped through*/
$('li').each(function (index, element) {
    count++;
    /*if the count % number_of_items_in_group returns anthing but a 0 it adds the height
    if you change 3 to 4 it will count elements in groups of 4 rather than three
    */
    if (count % number_of_items_in_group) {
        height += $(this).height();
    } else {
        /*adds the height, adds to group, sets the tallest, and appends to results*/
        groups++;
        height += $(this).height();
        count = 0;
        if (height > tallest) {
            tallest = height
        }
        $('#results').append('<p>' + height + ' Pixels: ' + groups + '</p>');
        height = 0;
    }

});
/*if the last group is less than number of items in group it will still
add the last group even though it has lower ammount of items in the group*/
if (indexL % number_of_items_in_group) {
    groups++;
    $('#results').append('<p>' + height + ' Pixels: ' + groups + '</p>');
    height = 0;
}
/*shows tallest*/
$('#results').append('<p>' + tallest + ' Pixels: Tallest</p>');

Jquery比较同一类中的每三个div

2 个答案: