Как вставить новый 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>), но это явно не работает, как обсуждалось здесь: Using .after() to add html closing and open tags.

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

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

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

Попробуйте, это будет вам помочь, это легко понять, здесь я делаю сначала найти вторую позицию в списке оных ДИВ на него, используя метод добавления ..

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

Fiddle Here

Answer 4

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 5

Вам нужно создать два списка и вставить новый 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/