使用Jquery在另一个特定标记元素之后添加特定标记元素

Question

我有以下代码：

HTML

<div class="menu">
  <ul>
    <li>
      <a href="#"> 1 </a>
    </li>
    <li>
      <a href="#"> 2 </a>
   </li>
   <li>
    <a href="#"> 3 </a>
   </li>
 </ul>
</div>

我试图在代码</li>的第一<li><a href="#">More</a><ul>之后以及使用Jquery的最后</li>结束</ul></li>之后添加。

我试过了

$( '.menu > ul > li:eq(0)' ).after( '<li><a href="#">More</a><ul>' ); ->tag1
$( '.menu > ul > li:eq(2)' ).after( '</ul></li>' ); ->tag2

在此处http://jsfiddle.net/B86JW/4/

问题在于<li>和<ul>会自动关闭，</li></ul>

会自动关闭

预期输出

<div class="menu">
  <ul>
    <li>
      <a href="#"> 1 </a>
    </li>
    <li><a href="#">More</a> -> tag 1
      <ul> -> tag 1
        <li>
          <a href="#"> 2 </a>
       </li>
       <li>
        <a href="#"> 3 </a>
       </li>
     </ul>
   </li> -> tag 2
 </ul> -> tag 2
</div>

Jsfiddle http://jsfiddle.net/B86JW/4/

Answer 1

尝试这样的事情，FIDDLE

    var new_li = $('<li><a href="#">More</a><ul></ul></li>')
    new_li.find('ul').append($( '.menu > ul > li:gt(0)' ));

    $( '.menu > ul > li:eq(0)' ).after( new_li );

Answer 2

试试这个，

var xHtml = $( '.menu > ul > li').first().nextAll().detach();
var xNewUl = $("<li><ul></ul></li>").appendTo('.menu > ul');

xNewUl.find('ul').prepend('<a href="#">More</a>').append(xHtml);

DEMO

更新版本，

var xHtml = $( '.menu > ul > li').first().nextAll().detach();
var xNewUl = $("<li><ul></ul></li>").appendTo('.menu > ul');

xNewUl.prepend('<a href="#">More</a>');
xNewUl.find('ul').append(xHtml);

DEMO I

Answer 3

你也可以试试这个：

var html = $('.menu ul li').not(':first').each(function(){
    return this.outerHTML;
});
$( '.menu > ul > li:eq(0)' ).after( '<li><a href="#">More</a><ul></ul></li>' );
$('.menu ul ul').html(html);