javascript - 使用 jquery 附加除特定类之外的 HTML

Question

单击复选框将#mosaicHTML 附加到#assetSelectedList但要跳过.asset-paid-li要附加的类。

小提琴演示

$("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>

Answer 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>