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

我正在尝试在第二个列表项后插入一个新的div。但我也想在它之前关闭，在它之后打开一个新的

这：

应该是这样的：

jQuery：

这是我的演示：

有没有办法用jQuery做到这一点

我已经试过在“新DIV”之后做，但显然不行，因为这里已经讨论过了：

下面是一个演示：

这个想法是创建一组新的列表，在它们之间有一个div，并用新的HTML结构替换旧的列表。由于有两个元素，有序列表上的数字现在重新启动。

试试看

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

---

试试这个，这会对你有帮助，很容易理解，这里我做的第一件事是使用append方法查找列表的第二项adddiv

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

拨弄

---

您需要创建两个列表并在它们之间插入新的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 );

或者，更好！创建一个新列表，将其附加到原始列表之后，并将部分列表项移动到其中。然后将新div追加到原始列表之后

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

---

这会将其插入到第二个列表项中。这不是他想要做的。请看本节的内容。谢谢您的帮助！奇怪的是，它只在整个东西被包装在一个div中时才起作用。还是我弄错了？@isuckatcoding这是为了让下一行的选择器更简单。谢谢PSL！顺便说一句，在第一次拉帕之前有一段时间不见了@是的，事实上它发生在我分解代码进行解释的时候。。更新：我感谢你的解释。谢谢@不客气。。。顺便说一句，更改显示名称..：

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

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

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

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

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