Fill list up to 10 items

Question

I'm looking for a way to fill a <ul> list up to 10 item. If the list doesn't have 10 in the HTML, I want the items to repeat themselves.

For example:

<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>

I tried to do it myself, but it's not exactly working they way I want it to:

  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();

It should become this:

<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>

The items should repeat themselves. It only works when there are 5 items or more... The reason is this: I'm using a special carousel plugin that should always have 10 items at all times. If it doesn't, it starts to act funky.

Thanks for any help.

Answer 1

Try this:

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();

The first segment will ensure that there's at least 10 elements in the UL. The second segment makes sure there are at most 10 elements in the UL so you end up with exactly ten items.

Answer 2

Here is my take:

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();

Note that :gt is 0 based.

Answer 3

Here's one way.

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

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

Nothing to clean up at the end. It does a 'look back' during each pass and clones and appends the proper element.

Answer 4

Your code look good with a single exception the way you add new slides. Instead of adding only once you'll need to loop and keep adding until you have 10 items. Something like:

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;
}