使用Jquery将特定的标签元素添加到另一个特定的标签元素之后 [英] Add a specific tag element after another specific tag element with Jquery

问题描述

我有以下代码：

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>后添加 code>代码< li>< a href =＃>更多< / a>< ul> &last 使用Jquery关闭< / ul>< / li> 。 b


我试过了

pre $ $ $（'.menu> ul> li：eq（0 ）'）.after（'< li>< a href =＃>更多< / a>< ul>'）; - > tag1
$（'.menu> ul> li：eq（2）'）.after（'< / ul>< / li>）; - > tag2


小提琴 http://jsfiddle.net/B86JW/4/



问题在于 < li>< code>< code>< ul> 会自动自动关闭，对于< / li>< ; / ul>

预期产出

 < div class =menu> 
< ul> 
< li> 
< a href =＃> 1< / a> 
< / li> 
< li>< a href =＃>更多< / a> - >标签1 
< ul> - >标记1 
< li> 
< a href =＃> 2< / a> 
< / li> 
< li> 
< a href =＃> 3< / a> 
< / li> 
< / ul> 
< / li> - >标记2 
< / ul> - >标记2 
< / div> 
  

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

解决方案

尝试类似这样的事情， FIDDLE

  var new_li = $（'< li>< a href =＃>更多< / a>< ul>< / ul>< / li>）
 new_li。 find（'ul'）。append（$（'.menu> ul> li：gt（0）'））; 
 
 $（'.menu> ul> li：eq（0）'）.after（new_li）; 
  

I have the below code:

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>

and i am trying to add after 1st </li> the code <li><a href="#">More</a><ul> and after the last </li> the closing </ul></li> with Jquery.

I have tried

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

Fiddle here http://jsfiddle.net/B86JW/4/

The problem is that <li> and <ul> is automatically self closing and the same thing for </li></ul>

Expected output

<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/

解决方案

try something like this,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 );

这篇关于使用Jquery将特定的标签元素添加到另一个特定的标签元素之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！