javascript - jquery 在两个 ul 之间交换 ul 子级

Question

我有以下带有两个列表的 html，我想按一个按钮并在两个列表之间交换 ul 和 li 元素

<ul class="list-group" id="lines">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

我尝试使用以下 jquery 代码来完成此任务

$("#swaplists").click(function () {

 var $temp1 = $("#lines").children.clone;
 var $temp2 = $("#columns").children.clone;
 clearLinesAndColumns();
 $temp2.appendTo("#lines");
 $temp1.appendTo("#columns");

});

预期结果是

<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>   
</ul>

但我收到错误

Uncaught TypeError: Cannot read property 'appendTo' of undefined

如何使用 jquery 实现此功能以及为什么 children.clone 未定义？

Answer 1

您可以简单地获取 html() 并插入到其他中，而不是克隆和附加:

$("#swaplists").click(function() {
  var linesHtml = $("#lines").html();
  var columnsHtml = $("#columns").html();
  $("#lines").html(columnsHtml);
  $("#columns").html(linesHtml);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
  <li class="list-group-item"> 1 <i class=" fa fa-times " aria-hidden="true "></i></li>
  <li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
  <li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
  <li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<button id="swaplists">Swap</button>