Добавить HTML, за исключением определенного класса, используя jquery - PullRequest
Новая
       29

Добавить HTML, за исключением определенного класса, используя jquery

0 голосов
/ 19 ноября 2018

При нажатии на флажок добавляется #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>

1 Ответ

0 голосов
/ 19 ноября 2018

Использование может исключать .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>
...