jQuery: сгруппируйте переменное количество элементов - PullRequest
Новая
       2

jQuery: сгруппируйте переменное количество элементов

1 голос
/ 22 августа 2011

В настоящее время я застрял в следующей проблеме:

Я пытаюсь сгруппировать переменное количество элементов в элемент-обертку.Все мои элементы плавают и изменяются по ширине.Если какой-либо элемент достигает правой стороны области просмотра, должна быть сгенерирована новая группа.

Это то, что у меня есть:

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>

1 Ответ

0 голосов
/ 22 августа 2011

То, что вы пытаетесь получить, не является семантической разметкой, так как LI нужно обернуть в UL. Конечно, вы можете просто переместить все слева в 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");
 }})

... и так далее. Ваш путь кажется слишком сложным - если я что-то пропустил!

...