Javascript 使用jquery在元素匹配时追加子元素

我希望使用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>

红色的

苹果
玫瑰

蓝色的

天空
海洋

第二个列表

<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]);
       }
     }
};

///创建菜单1项的数组
var menuitems=新数组（）；
$（'.menu1 li'）。每个（函数（）{
menuitems.push（$（this.text））；
});
////创建菜单2项的数组
var secondlistitems=新数组（）；
$（'.menu2 li'）。每个（函数（）{
secondlistitems.push（$（this.text））；
});
/////比较和如果匹配追加
对于（变量i=0；i-1）{
menuitems[i].children（）.appendTo（secondlistitems[j]）；
}
}
};

即使你的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

s

第二行：获取子列表名称

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

---

第四行：在

.menu2

中找到匹配的子列表，并在其旁边插入我们刚刚保存的内容

您可以在

.menu2

中遍历每个

li

，将

.menu1

的每个

li

与其文本进行匹配，如果匹配，在此

li

下克隆

ul

，并将

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

---

你试过什么了吗？你被困在哪里了？如果有问题，请提供您的尝试……可能是他错误地发布得太早了？无论如何，请检查：包含选择器！