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

Question

我正在嘗試在第二個列表項之后插入一個新的div。 但是我也想在</ol>之前關閉它，然后在它之后打開一個新的<ol> 。

這個：

<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>)但是顯然不起作用，因為這里已經討論過： 使用.after（）添加html關閉和打開標簽 。

Answer 1

嘗試

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

小提琴

如果要鏈接所有這些對象，則：

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

小提琴

Answer 2

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 />元素，因此已排序列表上的數字現在重新啟動。

Answer 3

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

Answer 4

您需要創建兩個列表，然后在它們之間插入新的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/

Answer 5

試試這個，這將對您有幫助，這很容易理解，在這里，我首先使用append方法在列表的第二項中添加add div。

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

小提琴Here