javascript - jQuery:对可变数量的元素进行分组

Question

目前我遇到了以下问题:

我尝试将可变数量的元素分组到一个包装元素中。我的所有元素都是 float 的并且宽度可变。如果任何元素到达视口(viewport)的右侧，则应生成一个新组。

这是我到目前为止所拥有的:

JS fiddle :

http://jsfiddle.net/FcRHf/1/ (注:控制台输出)

JS(jQuery)

jQuery(document).ready(function($) {

    var sum = 0;
    var max = $('li').length;
    var total = $('ul').innerWidth();
    var openRow = 'open';

    var closeRow = 'close';

    for (var i = 0; i < max; i++) {    
        // First iteration
        if (i == 0) {
            console.log(openRow);
        };

        if (total < sum + $('li').eq(i).innerWidth()) {
            // Reset Counter
            sum = 0;

            // New Row
            console.log(closeRow);
            console.log(openRow);

        };        

        // Inrement Sum - Counter
        sum = $('li').eq(i-1).innerWidth() + sum;

        // Output
        console.log(i+'- Total: '+total+' Sum: '+sum+' Item:'+$('li').eq(i).innerWidth());

        // Last iteration
        if (i == max-1) {
            console.log(closeRow);
        };
    };
});

HTML

<ul>
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</ul>

CSS

ul li {padding:30px;background:#eee;outline:1px solid #ccc;float:left}

产生的输出

取决于窗口宽度(注意:控制台输出)。

open
    0- Total: 1323 Sum: 205  Item: 217
    1- Total: 1323 Sum: 422  Item: 176
    2- Total: 1323 Sum: 598  Item: 266
    3- Total: 1323 Sum: 864  Item: 229
    4- Total: 1323 Sum: 1093 Item: 197
    5- Total: 1323 Sum: 1290 Item: 176
close
open
    6- Total: 1323 Sum: 176  Item: 217
    7- Total: 1323 Sum: 393  Item: 197
    8- Total: 1323 Sum: 590  Item: 428
    9- Total: 1323 Sum: 1018 Item: 229
   10- Total: 1323 Sum: 1247 Item: 205
close

我想要得到什么:

<!--The count of items per row depending on viewport width-->
<div class="row">
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
</div>
<div class="row">
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
</div>
<div class="row">
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</div>

Answer 1

您想要获得的不是语义标记，因为 LI 需要包装在 UL 中。当然，您可以 float 所有 li 的左侧并添加一个简单的 if 语句，其中显示:

$("li").each(function(){
if($(this).position().top == 0){
        this.addClass("row-1");
 }else if($(this).position().top > 0 && $(this).position().top <= 200){
    this.addClass("row-2");
 }})

...等等。你的方式似乎过于复杂 - 除非我错过了一些东西!