Question

如下所示有div的随机数，我试图在点击时克隆这些div。克隆时我想将内容更改为实际内容+没有克隆（基于span的内容，而不是“clone-this”的id或类）

例如

如果我点击第一个“chrome” div，因为正文已经有“chrome（1）和chrome（2）”，div的内容为“chrome（3 ）“应该出现。
如果我点击第二个div即。 “Mozilla Firefox”，由于没有克隆版本，因此应该会出现内容为“Mozilla Firefox（1）”的div。

依此类推。

我试图做到这一点，但是当我克隆时，计数是基于类，而不是内容。所以点击“chrome”div会克隆“chrome（5）”而不是“chrome（3）”。

同样在我的实现中，当我点击“chrome（1）”div时，它将克隆为“chrome（1）（5）”。我希望这就像“chrome（3）”

我怎样才能实现这一目标？

请注意，最初会有任意数量的div。图5仅用于示例。

 $(document).on('click', '.clone-this', function(){ 
      var CloneContainer = $(this).clone();
      var no = $('.clone-this').size();
      CloneContainer.html(CloneContainer.html() + " (" + no + ")");
      CloneContainer.appendTo('body');
  });

.clone-this{
      padding: 15px;
      width: 100px;
      text-align: center;
      border: 1px solid #ccc;
      margin: 10px auto;
      cursor: pointer;
      color: #444;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-family: monospace;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="clone-this"><span>Chrome</span></div>
  <div class="clone-this"><span>Mozilla Firefox</span></div>
  <div class="clone-this"><span>Safari</span></div>  
  <div class="clone-this"><span>Chrome (1)</span></div>
  <div class="clone-this"><span>Chrome (2)</span></div>

Answer 1

要做到这一点，你应该检查＆＃34;内容＆＃34;每个项目的数量，并计算具有相同文本的元素的数量。但是，这里有一个问题;每个元素（例如Chrome，Chrome（1），Chrome（2））都有不同的内容。因此，您可以使用括号分割文本，也可以使用RegEx（推荐）。

＆＃13;

 $(document).on('click', '.clone-this', function(){ 
  var CloneContainer = $(this).clone();
  var content = CloneContainer.find('span').html().split(' (')[0];
  var no = $(".clone-this:contains('"+content+"')").size();
  
  CloneContainer.html( CloneContainer.html() .split(' (')[0] + " (" + no + ")" );
  CloneContainer.appendTo('body');
});

＆＃13;

.clone-this{
  padding: 15px;
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 10px auto;
  cursor: pointer;
  color: #444;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: monospace;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-this"><span>Chrome</span></div>
  <div class="clone-this"><span>Mozilla Firefox</span></div>
  <div class="clone-this"><span>Safari</span></div>  
  <div class="clone-this"><span>Chrome (1)</span></div>
  <div class="clone-this"><span>Chrome (2)</span></div>

＆＃13;

在上面的代码段中，您可能会看到它的基本版本。但你必须考虑＆＃34;类似的内容＆＃34;问题如下。

铬
Chrome Mobile
火狐
Firefox Mobile

Answer 2

这是让你前进的另一种方式。我＆＃34;修剪＆＃34; clicked div到基本名称，然后循环浏览divs并获取所有length包含相同的基本名称。

之后我修改克隆元素以适当地填写克隆元素的正确计数：

＆＃13;

var regExp = /\([0-9]+\)/;

$('.clone-this').click(function(e){
  var target = e.target.textContent;
  var matches = regExp.exec(target);
  var elements = $('.clone-this');
  var count = elements.length;
  var index = 0;
  
  if (null != matches) {
    target = matches.input.substr(0, matches.input.lastIndexOf(" "));
  }
  
  for(var i = 0; i < count; i++){
    index += (elements[i].textContent.indexOf(target) > -1) ? 1: 0;
  }
  
  var CloneContainer = $(this).clone();
  CloneContainer.html(CloneContainer.html().split('(')[0] + "(" + index + ")" );
  CloneContainer.appendTo('body');
});

＆＃13;

.clone-this{
  padding: 15px;
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 10px auto;
  cursor: pointer;
  color: #444;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: monospace;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-this"><span>Chrome</span></div>
  <div class="clone-this"><span>Mozilla Firefox</span></div>
  <div class="clone-this"><span>Safari</span></div>  
  <div class="clone-this"><span>Chrome (1)</span></div>
  <div class="clone-this"><span>Chrome (2)</span></div>

＆＃13;

根据跨度的内容克隆div

2 个答案: