Как опустить дочерние элементы при выборе элементов в jQuery

Question

У меня есть такая страница

     <ul id="carousel_ul" style="left: -130px;" >

         <li><a href="#">Test 1</a></li>
         <li>
             <a href="#">Test 2</a>

             <div class="subnav">
                 <ul class="left">
                     <li><h2>JavaScript</h2></li>
                     <li><a href="#" title="JS Article 1">JS Article 1</a></li>
                     <li><a href="#" title="JS Article 2">JS Article 2</a></li>
                     <li class="last"><a href="#" title="JS Article 3">JS Article 3</a></li>
                 </ul>
                 <ul class="right">
                     <li><h2>jQuery</h2></li>
                     <li><a href="#" title="jQuery Article 1">jQuery Article 1</a></li>
                     <li><a href="#" title="jQuery Article 2">jQuery Article 2</a></li>
                     <li class="last"><a href="#" title="jQuery Article 3">jQuery Article 3</a></li>
                 </ul>
             </div>

         </li>

         <li><a href="#">Test 3</a></li>
         <li><a href="#">Test 4</a></li>
         <li>
             <a href="#">Test 5</a>

             <ul class="subnav">
                 <li class="first"><a href="#" title="The first demo">The first demo</a></li>
                 <li><a href="#" title="Another demo">Another demo</a></li>
                 <li class="last"><a href="#" title="The third demo">The third demo</a></li>
             </ul>

         </li>

         <li><a href="#">Test 6</a></li>
         <li><a href="#">Test 7</a></li>
         <li><a href="#">Test 8</a></li>
         <li><a href="#">Test 9</a></li>
         <li><a href="#">Test 10</a></li>
         <li><a href="#">Test 11</a></li>
         <li><a href="#">Test 12</a></li>

     </ul>

 </div> <!--end of div id="carousel_inner"  -->

Я выбираю такие элементы

$(document).ready(function(){

    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
    ....

}); //end of $(document).ready(fn)

Когда carousel_ul li создает массив li, тогда он содержит всеЛи и дети Ли, а также.Как первый li стать <li><a href="#">Test 1</a></li>, <li><a href="#">Test 3</a></li>, <li><a href="#">Test 4</a></li> и так далее.Но когда придет второй ли, тогда в нем будут и все дети.Как Test2 li содержит a, div, ul class = left, li, ul class = right, li .Я хочу, чтобы, если у моего li есть подменю типа test2 li и test5 li .Он будет выделен только как

 <li>
     <a href="#">Test 2</a>
 </li>

 <li>
     <a href="#">Test 5</a>
 </li>

Я имею в виду, хотя li test2 и li test5 имеют подменю, но когда строка $ ('#carousel_ul li: first') run, затем он будет обрабатывать li test2 и li test5 как li test1 или li test3.Например, если я выберу li test2 , тогда я получу что-то вроде этого

<li>
    <a href="#">Test 2</a>
</li>

<li>
    <a href="#">Test 5</a>
</li>

вместо

<li>
    <a href="#">Test 2</a>

    <div class="subnav">
        <ul class="left">
            <li><h2>JavaScript</h2></li>
            ....
        </ul>
        <ul class="right">
            <li><h2>jQuery</h2></li>
            ....
        </ul>
    </div>

</li>

<li>
    <a href="#">Test 5</a>

    <ul class="subnav">
        <li class="first"><a href="#" title="The first demo">The first demo</a></li>
        ...      
    </ul>

</li>

Как я могу это сделать?Спасибо

Answer 1

Вы можете клонировать нужные элементы, а затем удалить ребенка из клонов.