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

I have a list of divs in the same class. I want to compare every three of them and set the height to the highest one. For example:

我有一个同一类的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>

What I've found out so far is be able to find the highest height among all the lists, and set every list to that height using jquery.

到目前为止我发现的是能够在所有列表中找到最高的高度，并使用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'));
});

Is there a way to compare for every 3 div in the list and set height only to the highest among those three.

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

Thanks for everyone's reply. Sorry if I make you confused.I post an image below is better for everyone to understanding.

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

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

On a webpage, box1,2,3 are on the same line and I want to compare which box has the highest height and set the other two to be the same height. Then box4,5,6 are on a new line, compare those three and set each one to the highest. So first line and second line will have different height, but they are all in the same class. How can I set each line to be different height due to the highest box in that line in this case.

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

2 个解决方案

#1

You can iterate through each 3rd div and find next 2 others :

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

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

So using nth-child you get each 3rd div and 2 other followers and you can compare this way through each other.

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

#2

nth-child works. But it is not modular. If you want groups to be bigger than three you need to add 2 steps. here is an alternative code that will allow you to change 1 number and change the grouping size.

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

JSFiddle

的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>');

#1