使用 jquery 附加除特定类之外的 HTML答案

【问题标题】：Append HTML except particular class using jquery使用 jquery 附加除特定类之外的 HTML
【发布时间】：2019-04-21 13:25:06
【问题描述】：

点击复选框将#mosaic HTML 附加到#assetSelectedList 但想跳过.asset-paid-li 类来附加。

FIDDLE DEMO

$("input:checkbox").click(function(){
  if (this.checked) {
    $("ul#assetSelectedList").append($("ul#mosaic").html());
    $('ul#assetSelectedList input:checkbox').prop('checked', this.checked);
  }
  else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="thing" value="valuable" id="thing1">
<ul id="mosaic" class="clearfix list">
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-paid-li">ASSET PAID</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-paid-li">ASSET PAID</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
</ul>
<ul id="assetSelectedList" class="clearfix list"></ul>

【问题讨论】：

标签： javascript jquery html jquery-append

【解决方案1】：

使用可以排除.asset-paid-li 使用:not() 选择器。也可以使用.clone()，而不是获取元素的 HTML。

$("input:checkbox").click(function(){
  if (this.checked)
    $("ul#mosaic li:not(.asset-paid-li)").clone().appendTo("ul#assetSelectedList");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="thing" value="valuable" id="thing1">
<ul id="mosaic" class="clearfix list">
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-paid-li">ASSET PAID</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-paid-li">ASSET PAID</li>
  <li class="clearfix asset-free-li">Asset Free</li>
  <li class="clearfix asset-free-li">Asset Free</li>
</ul>
<ul id="assetSelectedList" class="clearfix list"></ul>

【讨论】：