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

Question

请看这个fiddle .

我一直在研究将文本附加到 div#area 的“全部添加”按钮。谁能告诉我如何使用 if 条件来防止重复文本添加到该区域？在 fiddle 示例中，我不希望将“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，因为这将终止循环，而不仅仅是当前迭代。