如何在有序列表之間插入新的div？

我試圖在第二個列表項後插入一個新的div。但是我也想關閉它之前的</ol>，然後在它後面打開一個新的<ol>。如何在有序列表之間插入新的div？

此：

<ol> 
    <li>test 1</li> 
    <li>test 2</li> 
    <li>test 3</li> 
    <li>test 4</li> 
</ol>

應該成爲這樣：

<ol> 
    <li>test 1</li> 
    <li>test 2</li> 
</ol> 
<div>NEW DIV</div> 
<ol> 
    <li>test 3</li> 
    <li>test 4</li> 
</ol>

的jQuery：

var el = $('ol li:eq(1)'); 

el.after('<div>NEW DIV</div>');

這裏是我的演示：http://jsfiddle.net/5hhr2/

有沒有辦法用jQuery做到這一點？

我已經試過做after('</ol><div>NEW DIV</div><ol>)但這顯然不起作用，因爲它已經在這裏討論：Using .after() to add html closing and open tags。

來源

2013-09-28 isuckatcoding

嘗試

var $lis = $('ol li'); 
$lis.filter(':lt(2)').unwrap().wrapAll('<ol/>').closest('ol').after('<div>NEW DIV</div>'); 
$lis.filter(':gt(1)').wrapAll('<ol/>');

Fiddle

如果你想鏈所有的人都那麼：

var $lis = $('ol li'); 
$lis.filter(':lt(2)') //get all the li's with index less than 2 i.e your number 
       .unwrap() //unwrap it 
       .wrapAll('<ol/>') //wrap them in ol 
       .closest('ol').after('<div>NEW DIV</div>').end().end() //append div next to the ol and go back in the chain to the first list of li's 
       .filter(':gt(1)') //filter to get remaining items 
       .wrapAll('<ol/>'); //wrap them all in a new ol

Fiddle

來源

2013-09-28 14:35:41 PSL

謝謝PSL！順便說一下，在第一個'wrapAll'之前沒有一段時間。 :) – isuckatcoding

@isuckatcoding是啊，事實上它發生了，但我打破瞭解釋代碼..更新:) – PSL

我讚賞解釋。謝謝！ – isuckatcoding

var $oldOL = $("ol"), 
    $newOL = $("<div><ol></ol><div>NEW DIV</div><ol></ol></div>"); 

$newOL.children().eq(0).append($oldOL.children().slice(0, 2)).end().eq(2).append($oldOL.children().slice(0, 2)); 

$oldOL.replaceWith($newOL.children());

這裏是一個演示：http://jsfiddle.net/5hhr2/9/

的想法是創建與他們之間的一個div一組新的列表，並與新的HTML結構取代舊的名單。由於有兩個<ol />元素，因此有序列表中的數字現在重新開始。

來源

2013-09-28 14:33:56 Jasper

謝謝您的幫助！奇怪的是，當**整個事物被封裝在一個div中時，它才起作用。還是我誤會了？ – isuckatcoding

@isuckatcoding這就是爲了讓下一行的選擇器更簡單。 – Jasper

試試這個，這將是幫助你，這是很容易理解，在這裏我做第一發現它的附加格使用方法追加列表的第二項..

$('ol li').eq(1).append('<div>New Div</div>');

小提琴Here

來源

2013-09-28 14:39:12

真的！這不是OP想要的 – PSL

這將其插入到第二個列表項中。 – isuckatcoding

這不是他想要做的。看看「應該成爲這個」部分 – Chanckjh

var el = $('ol li'); 
var elSize = el.length; 
var html = '<ol>'; 
el.each(function(i){    
    if(i > 0 && i % 2 == 0 && i < elSize) { 
     html += '</ol><div>NEW DIV</div><ol>';     
    }  
    html += '<li>' + $(this).text() + '</li>'; 
}); 
html += '</ol>'; 
$('body').html(html);

jsfiddle

來源

2013-09-28 14:39:18 cetver

您需要創建兩個列表，並插入它們之間的新的div。這裏有許多方式通過之前和之後的原始添加新的列表，然後用新的div替換原來做薄之一：

var list = $('ol'), 
    newList = $('<ol />'), 
    items = list.children(), 
    items1 = items.slice(0,2), 
    items2 = items.slice(2), 
    newDiv = $('<div>NEW DIV</div>'); 
list 
.before(newList.clone().append(items1)) 
.after(newList.clone().append(items2)) 
.replaceWith(newDiv);

http://jsfiddle.net/5hhr2/12/

，或者甚至更好！創建一個新列表，將其追加到原始文件之後，並將一部分列表項移動到該列表中。然後在原始列表後追加新的div。

var list = $('ol'), 
    newList = $('<ol />'), 
    items = list.children(), 
    newDiv = $('<div>NEW DIV</div>'); 
list.after( 
    newList.append( 
    items.slice(2).remove() 
)) 
    .after(newDiv);

http://jsfiddle.net/5hhr2/15/

來源

2013-09-28 14:44:02 pawel

如何在有序列表之間插入新的div？

回答

相關問題