jlery内にulの子がある場合、表示する最初のリスト項目になります

Question

私は複数のレベルのナビゲーションメニューを持っています。リストアイテムは、そのHTML階層に従って編成されています。私はjqueryの中にulという子を持っているliを見つけて、の最初の項目の中にul.list1のように表示します。上記で

<ul class="list1"> 
    <li><a href="#">List item 1</a></li> 
    <li><a href="#">List item 2</a></li> 
    <li class="slicknav_parent"><a href="#">List item 3</a> 
    <ul> 
     <li><a href="#">Child Item 1</a></li> 
     <li><a href="#">Child Item 2</a></li> 
     <li><a href="#">Child Item 3</a></li> 
     <li><a href="#">Child Item 4</a></li> 
    </ul> 
    </li> 
    <li><a href="#">List item 4</a></li> 
</ul> 

私が示した最初のリスト項目であることをリスト項目3をしたい：ここ

は、サンプルのHTMLです。 jQueryを使用してこれをどのように達成できますか？

Answer 1

あなたはこの方法を使用することができます。

$("li").find("ul").each(function() { 
    var theLI = $(this).closest("li"); // This is the `li`, which we are interested in. 
    theLI.prependTo(theLI.closest("ul")); 
}); 

prependTo()関数は最初の子としての要素を付加します。

コードにもエラーがあります。あなたは"list1"を閉じるのを忘れました。

スニペット

$(function() { 
 
    $("li").find("ul").each(function() { 
 
    var theLI = $(this).closest("li"); // This is the `li`, which we are interested in. 
 
    theLI.prependTo(theLI.closest("ul")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list1"> 
 
    <li><a href="#">List item 1</a></li> 
 
    <li><a href="#">List item 2</a></li> 
 
    <li class="slicknav_parent"><a href="#">List item 3</a> 
 
    <ul> 
 
     <li><a href="#">Child Item 1</a></li> 
 
     <li><a href="#">Child Item 2</a></li> 
 
     <li><a href="#">Child Item 3</a></li> 
 
     <li><a href="#">Child Item 4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">List item 4</a></li> 
 
</ul>

Answer 2

$("ul.list1 li").has("ul").prependTo("ul.list1");