список заливки до 10 пунктов

Question

Я ищу способ, чтобы заполнить <ul> список до 10 пункта. Если в списке нет 10 в HTML, я хочу, чтобы элементы повторялись.

Например:

<ul id="carousel"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
</ul> 

Я попытался сделать это сам, но это точно не работает, они, как я хочу, чтобы:

max_slides = 10; 

    slides_holder = $('#carousel'); 
    all_slides = $('#carousel li'); 
    number_of_slides = all_slides.length; 
    number_of_slides_to_add = max_slides - number_of_slides; 

    if(number_of_slides < max_slides) 
    { 
    slides_to_add = $('#carousel li:lt('+number_of_slides_to_add+')').clone(); 
    slides_holder.append(slides_to_add); 
    } 

    // $('#carousel').initiateCarousel(); 

Это должно стать следующее:

<ul id="carousel"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
</ul> 

Элементы должны повторяться. Он работает только в том случае, когда есть 5 предметов или более ... Причина в том, что я использую специальный карусельный плагин, который всегда должен иметь 10 предметов в любое время. Если это не так, он начинает действовать фанки.

Спасибо за любую помощь.

Answer 1

Вот мое взятие:

var $container = $('#carousel'); 
var $original = $container.children('li'); 
var totalChildren = $original.length; 

while (totalChildren < 10) { 
    $container.append($original.clone()); 
    totalChildren = $container.children('li').length; 
} 

$container.children('li:gt(9)').remove(); 

Обратите внимание, что :gt является 0 на основе.

Answer 2

Попробуйте это:

var li = $('ul#carousel li'); 
var len = li.size(); 

// Repeat the list until length is 10 
while(len < 10) { 
    $('ul#carousel li:last').after(li.clone()); 
    len += li.size(); 
} 

// Remove extra items after the 10th item 
$('#carousel > li').gt(9).remove(); 

Первый сегмент будет гарантировать, что есть по крайней мере 10 элементов в UL. Второй сегмент гарантирует, что в UL будет не более 10 элементов, поэтому вы получите ровно десять элементов.

Answer 3

Вот один из способов.

max = 10; 
$car = $('#carousel'); 
curr = orig = $car.children().length; 

while(curr < max) { 
    $car.children().eq(curr - orig).clone().appendTo($car); 
    curr = $car.children().length; 
} 

Ничего не убирать в конце. Он «оглядывается» во время каждого прохода и клонирует и добавляет правильный элемент.

Answer 4

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

while(number_of_slides < max_slides) 
{ 
    slides_to_add = $('#carousel li:lt('+number_of_slides_to_add+')').clone(); 
    slides_holder.append(slides_to_add); 
    number_of_slides += number_of_slides_to_add; 
    number_of_slides_to_add = max_slides - number_of_slides; 
}