我尝试使用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,但它不适用于子列表。
答案 0 :(得分:1)
如何在菜单A之后简单地从菜单B添加HTML。因此,您不必担心循环浏览多个级别的列表项。
$(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;
答案 1 :(得分:0)
您需要在每个语句中监听每个元素是否有子项。
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;