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

如何在菜单A之后简单地从菜单B添加HTML。因此，您不必担心循环浏览多个级别的列表项。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要在每个语句中监听每个元素是否有子项。

＆＃13;

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>');

＆＃13;

<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>

＆＃13;

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

2 个答案: