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

我使用clone()和remove()与div元素.如何制作克隆限制？例如,我可以克隆最多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>

要使其工作,您可以在克隆下一个元素之前检查.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>