使用jQuery附加HTML（特定类除外）

Question

On click checkbox appending #mosaic HTML to #assetSelectedList but want to skip .asset-paid-li class to append.

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

Use can exclude .asset-paid-li using :not() selector. Also use .clone() instead of getting HTML of elements.

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