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

Question

单击复选框将 #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>

Answer 1

使用:not()可以排除.asset-paid-li选择器。还可以使用 .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>