如何將html div復制到另一個div而不顯示none div

Question

我有一個像下面的結構。 在lookbook-pointadding我只需要復制設置了display: block的div元素。

我的代碼不刪除帶有display: none的div display: none 。

我也嘗試了$("#lookbook-pointadding").clone().appendTo("#lookbook-pointedit")但它也無法正常工作。

誰能告訴我我要去哪里錯了？

<div id="lookbook-pointedit"></div>
<div id="lookbook-pointadding">
  <div class="drag" style="display: none">A</div>
  <div class="drag" style="display: none">B</div>
  <div class="drag" style="display: block">C</div>
  <div class="drag" style="display: none">D</div>
  <div class="drag" style="display: block">E</div>
</div>

$('#submit').click(function(e) {
  e.preventDefault();
  if ($('#lookbook-pointadding.drag').css('display') == 'none') {
    $(this).remove(); //already tried $('#lookbook-pointadding.drag').removed();
  }
  var point = $('div#lookbook-pointadding').html();
  $('#lookbook-pointedit').append(point);
})

Answer 1

要解決此問題，您可以使用:visible選擇器僅檢索DOM中顯示的子div元素。 然后，您可以clone()它們並將其附加到所需的目標。 嘗試這個：

 $('#submit').click(function(e) { e.preventDefault(); var $clones = $('#lookbook-pointadding div:visible').clone(); $('#lookbook-pointedit').append($clones); }) 

 #lookbook-pointedit { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="lookbook-pointedit"></div> <div id="lookbook-pointadding"> <div class="drag" style="display: none">A</div> <div class="drag" style="display: none">B</div> <div class="drag" style="display: block">C</div> <div class="drag" style="display: none">D</div> <div class="drag" style="display: block">E</div> </div> <button id="submit">Submit</button>