使用 jquery 添加 HTML 除了特定的 class

Question

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

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

Use can exclude .asset-paid-li using :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>

使用 jquery 添加 HTML 除了特定的 class

Append HTML except particular class using jquery

html

javascript

jquery

jquery-append