用 jQuery 合并两个包含子 ul 的 ul 菜单答案

【问题标题】：Merging two ul menus that contain child ul with jQuery用 jQuery 合并两个包含子 ul 的 ul 菜单
【发布时间】：2017-04-01 07:53:38
【问题描述】：

我正在尝试使用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 的解决方案，但它不适用于子列表。

【问题讨论】：

请发布您想要的结果的示例。

标签： jquery html

【解决方案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">

【讨论】：

我喜欢这条路线的简单性，因为我想保持两个菜单完好无损，但在一起这是完美的。谢谢你。当用户增加浏览器窗口的大小时，我如何让它以 760 像素触发然后再次分开？
您可以根据浏览器宽度显示/隐藏菜单。 Example

【解决方案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>

【讨论】：