填写清单最多10个项目 [英] Fill list up to 10 items

问题描述

我正在寻找一种方法来填充最多10个项目的<ul>列表.如果列表中的HTML中没有10，则我希望这些项目重复一遍.

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.

例如:

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

应该变成这样:

<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个项目.如果没有，它将开始变得时髦.

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.

感谢您的帮助.

推荐答案

这是我的看法:

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

这篇关于填写清单最多10个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！