jquery - 如何限制可以制作的克隆数量

Question

我对 div 元素使用 clone() 和 remove()。我怎样才能做一个克隆限制？例如，我最多可以克隆 10 个 div 元素。

$('.wrapper').on('click', '.remove', function() {
  $('.remove').closest('.wrapper').find('.element').not(':first').last().remove();
});
$('.wrapper').on('click', '.clone', function() {
  $('.clone').closest('.wrapper').find('.element').first().clone().appendTo('.results');
});

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
  </div>
  <div class="results"></div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

Answer 1

要完成此工作，您可以在克隆下一个元素之前检查 .result .element 元素的数量。如果数量达到限制，请不要执行克隆操作。

请注意，在下面的示例中，我将限制设置为 2 以使测试更容易，并且我还对选择器进行了一些更改以使其更加简洁。

$('.wrapper').on('click', '.remove', function() {
  $(this).closest('.wrapper').find('.element:not(:first):last').remove();
  setCloneButtonVisibility();
});

var cloneLimit = 2;

$('.wrapper').on('click', '.clone', function() {
  if ($('.results .element').length <= cloneLimit) { // just to make testing easier
    $(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
  }
  setCloneButtonVisibility();
});

function setCloneButtonVisibility() {
  $('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}

body {
  padding: 1em;
}

.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}

.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element"></div>
  <div class="results"></div>
  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>