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

请看看这个

我一直在研究“添加所有”按钮，将文本附加到

div#area

。有谁能告诉我如何使用if条件来防止重复文本添加到区域中？在小提琴的例子中，我不希望“A”，“B”被附加到区域上两次

HTML:

jQuery API中.text（）的说明：

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

因此，这个

$（'#area'）.find（'.add'）.text（）

返回所有.add元素在#area中的串联内容（'在您的示例中为'abcdd'或'abfg'））

---

您必须单独或通过jQuery选择器检查每个元素的内容：

$（“#区域”）。查找（“.add:contains（“+content+”）））。长度>0

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

var textArray = [];
...
if ($.inArray(content,textArray) === -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());
        }
    });
});

请注意，这只适用于您的应用程序，因为div只包含一个字母

：contains（X）

查找DIV，其中

X

是任何子字符串，而不是全部内容

---

在查找匹配项时，您不应该使用

return false

，因为这将终止循环，而不仅仅是当前迭代。

只是一个小提示，我必须添加一个Adblock排除来查看您的a-D div。它是否总是只有这些单个字母，或者您希望在它们的位置上有更多的文本/子字符串？@JohnC，no，在我的实际情况中，不仅仅是这些字母。每个

duv.add

都有更多的内容。

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

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