用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元素

回答

相關問題