如何在Javascript中交换两个列表的子列表

How to swap sublists of two lists in Javascript?

本文关键字：列表 两个 Javascript 交换      更新时间：2023-09-26

我试图只使用JavaScript交换两个列表，但我尝试的任何方法似乎都失败了。

这是我的两个清单：

<h3>Lists</h3>
<ul >
    <li >l<sub>1  </sub>    
        <ul id="e1">
            <li>l<sub>11</sub>-a</li>
            <li>l<sub>12</sub>-b</li>
            <li>l<sub>13</sub>-a</li>
            <li>l<sub>14</sub>-a</li>
            <li>l<sub>15</sub>-b</li>
            <li>l<sub>16</sub>-b</li>
        </ul>
    </li>
    <li >l<sub>2  </sub>    
        <ul id="e2"> 
            <li>l<sub>21</sub>-b</li>
            <li>l<sub>22</sub>-a</li>
            <li>l<sub>23</sub>-a</li>
            <li>l<sub>24</sub>-b</li>
        </ul>
    </li>
</ul>
<br/>

到目前为止，我已经尝试过像这样迭代每个列表：

var temp, index;
var myFirstList  = document.getElementById("e1").getElementsByName("li");
var mySecondList = document.getElementById("e2").getElementsByName("li");
for (index = 0; index < myFirstList.length; index++)
{
    temp.appendChild(myFirstList.removeChild(myFirstList[0]);
}
for (index = 0; index < mySecondList.length; index++)
{
    myFirstList.appendChild(mySecondList.removeChild(mySecondList[0])); 
}
for (index = 0; index < temp.length; index++)
{
    mySecondList.appendChild(temp.removeChild(temp[0]));
}
document.getAttribute("e1").appendChild(myFirstList);
document.getAttribute("e2").appendChild(mySecondList);

我也试过：

var myFirstList  = document.getElementById("e1").getElementsByName("li");
var mySecondList = document.getElementById("e2").getElementsByName("li");
document.getElementById("e1").removeAttribute(("li");
document.getElementById("e2").removeAttribute(("li");
document.getAttribute("e1").appendChild(myFirstList);
document.getAttribute("e2").appendChild(mySecondList);

它们都没有交换l1和l2中的子列表。任何建议都会很有帮助。

我不明白你说的交换是什么意思，请详细说明，但是，如果你想使用它们的父元素ul迭代li元素，你可以这样做。

var sublist1 = document.getElementById('e1');
 for (var i=0; i<sublist1.children.length; i++){
      sublist1.children[i].innerHTML = someVariable;
 }

使用JQueryappendTo方法可以很容易地解决您的问题。

var childL1 = $('#e1').children();
var childL2 = $('#e2').children();
childL2.appendTo($('#e1'));
childL1.appendTo($('#e2'));

试试这个。

 var sublist1 = document.getElementById('e1');
 var sublist2 = document.getElementById('e2');
 document.getElementsByTagName('ul')[0].childNodes[1].appendChild(sublist2);
 document.getElementsByTagName('ul')[0].childNodes[3].appendChild(sublist1);
相关文章：