javascript - 如何在不显示无div的情况下将html div复制到另一个div

Question

我的结构如下。在 lookbook-pointadding 中，我只需要复制设置了 display: block 的 div 元素。

我的代码没有使用 display: none 删除 div。

我也试过 $("#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>