将包含子 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>

我在这里尝试了将 2 个单独的菜单合并为一个菜单的解决方案，但它不适用于子列表。

Answer 1

简单地将菜单 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">

Answer 2

您需要侦听以查看每个语句中的每个 this 元素是否有一个子项。

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>