javascript - 填写列表最多 10 项

Question

我正在寻找一种方法来填写 <ul>最多列出 10 项。如果列表中的 HTML 中没有 10，我希望这些项目自行重复。

例如:

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

第一段将确保 UL 中至少有 10 个元素。第二部分确保 UL 中最多有 10 个元素，因此您最终会得到正好 10 个项目。