Question

我有一个未知数量的LI元素列表。我想要做的是每隔一定数量的LI插入另一个LI。

也就是说，例如，每个6（这个数字可以改变）LI elemtns我想插入另一个。有没有办法做到这一点？

由于

编辑：

主要问题是我之前不知道数字，因为它来自数学运算。我可以让这个数字动态吗？这就是我试图做的事情：

var n  = Math.floor(wd/114);
$('.carousel-inner ul li:nth-child('.n.'n)').after('<div>after</div>');

看起来没有效果。

编辑2：

我将JS与PHP语法混为一谈，我只是使用'+'修复它。

Answer 1

使用nth-child selector

$('ul li:nth-child(6n)').after('<li>after</li>')

演示：Fiddle

拥有动态数字

var n  = Math.floor(wd/114);
$('.carousel-inner ul li:nth-child(' + n + 'n)').after('<li>after</li>');

Answer 2

如果你愿意，这是另一种解决方案。

<ul id="list">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>

这是jQuery代码。

$('#list li').each(function(i,e){
  if (((i+1) % 6) == 0)
    $(this).after('<p>Hello, world.</p>');
});

JsFriddle演示。

Answer 3

确保您的HTML标记正确，如下所示：

<ul class="list">
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
    <li>some stuff</li>
</ul>

然后您可以使用 nth-child 选择器：

$(".list li:nth-child(3n)").after("<li class='newLi'>New Li</div>");

在列表中的每三个列表项后添加新的li，您可以更改为您想要的任何数字。

<强> Fiddle Demo

Answer 4

问题尚不清楚您是要修改现有的DOM UL元素，还是要一起创建新的列表。

以下代码会创建一个全新的列表，因为其他答案会解决现有列表。 http://jsfiddle.net/Emjs4/

var intersection = 5;
var containerElement = document.getElementById('container');
var listFragment = document.createDocumentFragment();

for(var i = 0; i < 25; i++) {
    var li = document.createElement("li");
    listFragment.appendChild(li);

   if((i+1) % intersection == 0) {
       var liExtra = document.createElement("li");
       liExtra.className = "extra";
       listFragment.appendChild(liExtra); 
   }
}

containerElement.appendChild(listFragment);

请花点时间了解使用createDocumentFragment（）的原因。 https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

使用JQuery每隔一定数量的子项插入HTML元素

4 个答案: