子ulを含む2つのulメニューをjQueryでマージする

Question

jQueryを使用して2つの順序付けられていないリストをマージしようとしています。 2番目のリストには子リストが含まれています。これをどうやってやりますか？私のHTMLはこのように見えます。

<ul class="Menu A"> 
    <li><a href="#">Item One</a></li> 
    <li><a href="#">Item Two</a></li> 
    <li><a href="#">Item Three</a></li> 
    <li><a href="#">Item Four</a></li> 
</ul> 

<ul class="Menu B"> 
    <li><a href="#">Item A</a></li> 
    <li><a href="#">Item B</a> 
     <ul class="childMenu"> 
      <li><a href="#">Item B1</a></li> 
      <li><a href="#">Item B2</a></li> 
      <li><a href="#">Item B3</a></li> 
      <li><a href="#">Item B4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item C</a></li> 
    <li><a href="#">Item D</a></li> 
</ul> 

私はここで解決策を試しましたが、merge 2 separate menus into a single menuですが、それは子リストでは機能しません。

Answer 1

各ステートメントにこの要素ごとに子項目があるかどうかを確認する必要があります。

var my_merged_list = ""; 
 
$('ul li').each(function() { 
 
    var count = $(this).find('ul').length; 
 
    var ll = $(this).find('a:first').text(); 
 
    ll = "<a href='#'>" + ll + "</a>"; 
 
    my_merged_list = my_merged_list + "<li>" + ll + "</li>"; 
 
}); 
 
$('ul').remove(); 
 
$('body').append('<ul>' + my_merged_list + '</ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="Menu A"> 
 
    <li><a href="#">Item One</a></li> 
 
    <li><a href="#">Item Two</a></li> 
 
    <li><a href="#">Item Three</a></li> 
 
    <li><a href="#">Item Four</a></li> 
 
</ul> 
 

 
<ul class="Menu B"> 
 
    <li><a href="#">Item A</a></li> 
 
    <li><a href="#">Item B</a> 
 
    <ul class="childMenu"> 
 
     <li><a href="#">Item B1</a></li> 
 
     <li><a href="#">Item B2</a></li> 
 
     <li><a href="#">Item B3</a></li> 
 
     <li><a href="#">Item B4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item C</a></li> 
 
    <li><a href="#">Item D</a></li> 
 
</ul>

Answer 2

あなたがリスト項目の複数のレベルをループを心配する必要はありませんので、単にメニューA.後にメニューBからHTMLを追加についてどう。

$(function(){ 
 
    $("#MenuBoth") 
 
    .html($("#MenuA").html()) 
 
    .append($("#MenuB").html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Menu A</div> 
 
<ul id="MenuA"> 
 
<li><a href="#">Item One</a></li> 
 
<li><a href="#">Item Two</a></li> 
 
<li><a href="#">Item Three</a></li> 
 
<li><a href="#">Item Four</a></li></ul> 
 
<div>Menu B</div> 
 
<ul id="MenuB"> 
 
<li><a href="#">Item A</a></li> 
 
<li><a href="#">Item B</a> 
 
     <ul class="childMenu"> 
 
      <li><a href="#">Item B1</a></li> 
 
      <li><a href="#">Item B2</a></li> 
 
      <li><a href="#">Item B3</a></li> 
 
      <li><a href="#">Item B4</a></li> 
 
    </ul> 
 
</li> 
 
<li><a href="#">Item C</a></li> 
 
<li><a href="#">Item D</a></li></ul> 
 
<div>Menu Both</div> 
 
<ul id="MenuBoth">