Question

我将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>

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>

Answer 2

$('.wrapper').on('click', '.remove', function() {
var numItems = $('.element').length;
alert("No of element: "+numItems);
if(numItems>=1){
  $('.remove').closest('.wrapper').find('.element').not(':first').last().remove();
  }
  else{
  alert("There should be at least one element...");
  }
});
$('.wrapper').on('click', '.clone', function() {
var numItems = $('.element').length;
var maxNoDiv=3;//No of max dived could be added in the system
alert("No of element: "+numItems);
if((numItems+1)<=maxNoDiv){
  $('.clone').closest('.wrapper').find('.element').first().clone().appendTo('.results');
  }
  else{
  alert("u cant add more than "+maxNoDiv+" divs...");
  }
});

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 3

您可以考虑使用CSS选择器，该选择器将始终选择要克隆的最后一个子项，并且该最后一个子项应在特定范围内。

为此，您需要调整结构并使元素克隆到result包装器中：

$('.remove').click(function() {
  $(this).closest('.wrapper').find('.element:not(:first-of-type):last-of-type').remove();
});
$('.clone').click(function() {
  $(this).closest('.wrapper').find('.element:nth-of-type(-n+3):last-of-type').clone().appendTo('.results');
});

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 20px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.element:nth-of-type(-n+3):last-of-type {
  background:red;
}
.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="results">
      <div class="element">
      </div>
  </div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

使用nth-of-type(-n+3):last-of-type将在前3个元素中选择最后一个孩子，当我们有更多选择器时，该选择器将匹配0个元素，并且您将无法再进行克隆。

如何限制可以克隆的数量

3 个答案: