Question

我有清单项目

<ul class="menu">

  <li> LIST 1 </li>
  <li> LIST 2 </li>
  <li> LIST 3 </li>

</ul>

<div class="append_li"></div>

因此，假设当我单击<li>LIST 1</li>时，带有标签的其余li应该附加在div标签中，而不是单击li，因此如何使用jQuery

Answer 1

您可以为此使用jQuery .clone()：

$(document).ready(function(){
  $('li').click(function(){
     //$('.append_li').html('');
     $('.append_li').html($('li').not($(this)).clone());
  });
});

工作片段：

$(document).ready(function(){
  $('li').click(function(){
     //$('.append_li').html('');
     $('.append_li').html($('li').not($(this)).clone());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">

<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>

</ul>

<div class="append_li"></div>

注意： ：如果您想替换而不是追加，然后在代码中的<div>行之前添加以下行

.clone()

重要提示：-每个人都在谈论无效的HTML，您可以通过执行以下代码来克服该问题 ：

$('.append_li').html('');

输出：http://jsfiddle.net/0mz9s8ng/

Answer 2

您可以这样使用：

$('.menu li').click(function (){
   $(this).siblings('li').clone().appendTo('.append_li')
});

或类似

$('.menu li').click(function (){
   $(this).siblings('li').appendTo('.append_li')
});

如何将所有li从无序列表传递到div（单击的li除外）

2 个答案: