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个项目。

Answer 2

这是我的看法：

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

最多可填写10个项目

4 个答案: