Question

我希望使用jquery追加匹配li元素的子元素。例如

第一个列表

<ul class="menu1">
  <li>Red</li>
    <ul>
      <li>apple</li>
      <li>rose</li>
    </ul>
  <li>Blue</li>
   <ul>
      <li>sky</li>
      <li>ocean</li>
    </ul>
</ul>

第二个清单

<ul class="menu2">
  <li>Red</li>
  <li>Blue</li>
</ul>

因此，我想使用JQuery将第一个列表中的子列表附加到第二个列表的匹配元素。

这是我尝试过的事情

//// create array of menu 1 items
var menuitems = new Array();
$('.menu1 li').each(function(){
  menuitems.push($(this).text);
});

//// create array of menu 2 items

var secondlistitems = new Array();

$('.menu2 li').each(function(){
  secondlistitems.push($(this).text);
});

///// compare and if match append

for (var i = 0; i < menuitems.length; i++) {
for (var j = 0; j < secondlistitems.length; j++) {

       if ($.inArray(secondlistitems[i], menuitems) > -1) {
    menuitems[i].children().appendTo(secondlistitems[j]);
       }
     }
};

Answer 1

如果你的HTML组织得更好，你可能可以更轻松地做你想做的事情......这里有一个可行的代码片段，可以做你想做的事情

$(function() {
    $("ul.menu1").children("li").each(function (){
      var subListName = $(this).html();
      var subListContent = $(this).next("ul").clone();
      $(".menu2 li:contains("+ subListName +")").after(subListContent);
    });
});

第一行：遍历您的.menu1并遍历每个li

第二行：获取子列表名称

第三行：找到最接近<ul>的子列表，并克隆其内容

第四行：在.menu2中找到匹配的子列表，然后插入我们刚刚保存的内容

Answer 2

您可以遍历li中的每个.menu2，将li的每个.menu1与其文字相匹配，如果匹配，则克隆此ul下的li {1}}并将ul插入适当位置的.menu2

     $(function () {
        var menu1 = $('.menu1'),
           menu2 = $('.menu2');

        $('li', menu2).each(function () {
           var m2_li = $(this);
           $('> li', menu1).each(function () {
              if ($(this).text() == m2_li.text()) {
                 $(this).next('ul').clone().insertAfter(m2_li);
              }
           })
        })
     });

如果元素使用jquery匹配，则追加子元素

2 个答案: