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

Question

在單擊復選框上，將#mosaic HTML附加到#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

使用可以使用: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>