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>

但是我收到了错误

未捕获的TypeError：无法读取未定义的属性'appendTo'

如何使用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>

Answer 2

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

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

});

你忘了把＆＃39;（）＆＃39;打电话给孩子后＃39;克隆＆＃39;那些是方法。

Answer 3

以下是示例代码：

＆＃13;

$("#swaplists").click(function() {

  var $temp1 = $("#lines li");
  var $temp2 = $("#columns li");

  $temp2.appendTo("#lines");
  $temp1.appendTo("#columns");

});

＆＃13;

<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 LISTS</button>

＆＃13;

jquery在两个ul

3 个答案: