javascript - 如何将html div复制到另一个div而不显示无div

Question

我有一个像下面这样的结构。在lookbook-pointadding我只需要复制设置了的div元素display: block。

我的代码没有删除divwith 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);
})

标签： javascriptjquery

Answer 1

要解决此问题，您可以使用:visible选择器仅检索divDOM 中显示的子元素。然后您可以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>