Question

请查看此fiddle。

我一直致力于＆＃34; Add All＆＃34;将文字追加到div#area的按钮。谁能告诉我如何使用if条件来防止重复文本添加到该区域？在小提琴的例子中，我不想要＆＃34; A＆＃34;，＆＃34; B＆＃34;将两次附加到该区域。

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，因为这会终止循环，而不仅仅是当前的迭代。

Answer 2

来自jQuery-API的.text（）说明：

获取匹配元素集中每个元素的组合文本内容

因此，此$('#area').find('.add').text()会返回#area中所有.add元素的连接内容（＆＃39; ABC D＆＃39;或者＃39; ABF G＆＃39;在您的示例中）。

您必须单独检查每个元素的内容，或通过jQuery-selector检查：$('#area').find(".add:contains('" + content + "')").length > 0

Answer 3

我会使用数组来存储内容值，然后检查这些值。

var textArray = [];
...
if ($.inArray(content,textArray) === -1) {
...

DEMO

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

3 个答案: