javascript – 根据span的内容克隆div

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

例如.

>如果我点击第一个“chrome”div,因为正文已经有“chrome(1)和chrome(2)”,所以应该出现内容为“chrome(3)”的div.
>如果我点击第二个div即. “Mozilla Firefox”,由于没有克隆版本,因此应该出现内容为“Mozilla Firefox(1)”的div.

等等.

我试图做到这一点,但当我克隆计数是基于类,而不是内容.所以点击“chrome”div会克隆“chrome(5)”而不是“chrome(3)”.

同样在我的实现中,当我点击“chrome(1)”div时,它将克隆为“chrome(1)(5)”.我希望这就像“chrome(3)”

我怎么能实现这个目标?

请注意,首先会有任意数量的div.图5仅用于示例.

jsfiddle here

 $(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>
最佳答案
要实现这一点,您应该检查每个项目的“内容”并计算具有相同文本的元素数量.但是,这里有一个问题;每个元素(例如Chrome,Chrome(1),Chrome(2))都有不同的内容.因此,您可以使用括号分割文本,也可以使用RegEx(推荐).

 $(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');
});
.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>

在上面的代码段中,您可能会看到它的基本版本.但你必须考虑如下的“类似内容”问题.

> Chrome
> Chrome移动版
> Firefox
> Firefox Mobile

转载注明原文:javascript – 根据span的内容克隆div - 代码日志