Question

我正在尝试仅使用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中的子列表。任何的意见都将会有帮助。

Answer 1

我不明白交换是什么意思，请详细说明，但是如果你想用他们的父ul迭代li元素，你可以做类似的事情。

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

Answer 2

使用JQuery appendTo 方法可以轻松解决您的问题。

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

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

Answer 3

试试这个。

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

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

3 个答案: