防止在jQuery中附加重复的内容

Question

请看看这个小提琴.

我一直在处理附加文本的"添加全部"按钮div#area.谁能告诉我如何使用if条件来防止重复文本添加到该区域？在小提琴示例中,我不希望将"A","B"两次附加到该区域.

HTML:

<div class="addarea">
<div class="add">A</div>
<div class="add">B</div>
<div class="add">C</div>
<div class="add">D</div>
    <button class="addall">Add All</button>
</div>

<div class="addarea">
<div class="add">A</div>
<div class="add">B</div>
<div class="add">F</div>
<div class="add">G</div>
    <button class="addall">Add All</button>
</div>

<button id="remove">Remove</button>

<div id="area"></div>

代码失败:

$('.addall').click(function(){
  var add = $(this).closest('.addarea').find('.add');
  add.each(function(){
    var copy = $(this).clone(),
        content = $(this).text();
    if($('#area').find('.add').text() == content){          
          return false;
      }
      else
      {
         $('#area').append(copy);
      }
 });
});

$('#remove').click(function(){
 $('#area').find('div').remove();
});

Answer 1

您可以使用:contains()选择器查找与DIV循环中的当前文本具有相同文本的DIV .

$('.addall').click(function(){
    var add = $(this).closest('.addarea').find('.add');
    add.each(function(){
        var content = $(this).text();
        if ($('#area > div:contains('+content+')').length == 0) {
            $('#area').append($(this).clone());
        }
    });
});

DEMO

请注意,这仅适用于您的应用程序,因为DIV只包含一个字母.:contains(X)查找DIV,其中X是任何子字符串,而不是整个内容.

return false在查找匹配时不应该使用,因为这将终止循环,而不仅仅是当前迭代.