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

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

也就是说，在这个例子中，这个数字每6个都可能改变LI元素，我想插入另一个。有办法做到这一点吗

谢谢

编辑：

主要问题是我以前不知道这个数字，因为它来自一个数学运算。我能把这个数字变成动态的吗？这就是我试图做的：

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

但这似乎不起作用

编辑2：

我把JS和PHP语法混为一谈，我只是用“+”修复了它。

使用

演示：

有动态数

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

使用

演示：

有动态数

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

---

确保您的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>

然后，您可以使用选择器：

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

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

---

确保您的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>

然后，您可以使用选择器：

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

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

---

如果您正在修改现有的domul元素，或者同时创建一个新列表，那么问题就不清楚了

下面的代码将创建一个全新的列表，因为其他答案将处理现有列表。

请花点时间理解为什么使用createDocumentFragment。

---

如果您正在修改现有的DOM UL元素，或者您正在一起创建一个新列表，那么问题就不清楚了

下面的代码将创建一个全新的列表，因为其他答案将处理现有列表。

请花点时间理解为什么使用createDocumentFragment。

---

如果您需要，这里有另一种解决方案

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

---

演示。

如果您需要，这里有另一种解决方案

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

演示