用JQuery插入每个特定数量的子元素的HTML元素

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

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

感谢

编辑：

的主要问题是，我不知道以前的数量，因为它来自一个数学运算。我可以让这个号码动态吗？这是我试图做的：

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

BUt似乎不起作用。

编辑2：

予混在一起PHP语法JS，我仅通过使用 '+' 固定它。

来源

2014-02-11 user1869935

使用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>');

来源

2014-02-11 02:52:42

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

来源

2014-02-11 03:05:45 Felix

这个问题不清楚，如果你正在修改现有的DOM UI元素，或者你正在创建一个新的列表中的所有在一起。

以下代码完全创建了一个全新的列表，因为其他答案会解决现有列表。 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

来源

2014-02-11 03:06:30 alexK85

如果需要，这里是备用解决方案。

<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演示。

来源

2014-02-11 03:23:01

用JQuery插入每个特定数量的子元素的HTML元素

回答

相关问题