合併兩個UL菜單，其中包含兒童ul與jQuery

Question

我試圖合併兩個無序列表使用jQuery。第二個列表包含子列表。我會如何去做這件事？我的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

什麼簡單地從追加B菜單HTML菜單A.後，所以你不必擔心通過列表項的多層次循環。

$(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">