jQuery在单击时添加了重复的元素

我试图根据单击的链接将内容附加到元素。如果该内容已经存在，则不应发布该内容的副本。我遇到的问题是，除了第一个点击的链接外，每个链接都有重复的内容

将从中生成内容和ID的链接：

<a href='#' id="a">a</a>
<a href='#' id="b">b</a>
<a href='#' id="c">c</a>

---

首先，元素

id

s必须是唯一的。改用类或

数据-

属性

其次，

.attr（'whatever'）

返回集合中第一项的值。更好的方法是尝试选择元素，然后检查集合的长度：

if ($('#list > li.' + $(this).attr('id')).length == 0) {
    //doesn't exist!
}

请注意，我的示例中的选择器为

li

使用类，而不是id。

尝试调试：

您将看到

.children（）.attr（）

只返回第一个元素

为了解决这个问题，您可以检查每个子元素，看看它是否等于单击的

id

：

$('a').click(function(){
    var clickedId = $(this).attr('id');
    var add = true;
    
    $('li','#list').each(function(){
      if ($(this).attr('id') == clickedId)
      {
           add = false;   
      }
    });
    
    if (add) 
    {
        var content = '<li id=' + $(this).attr('id') + '>' + $(this).html() + '</li>';
        $('#list').append(content)
    }
})

$（'a'）。单击（函数（）{
var clickedId=$（this.attr（'id'）；
var add=true；
$（'li'，'#list'）。每个（函数（）{
if（$（this）.attr（'id'）==单击EDID）
{
add=false；
}
});
如果（添加）
{
var content='
'+$（this.html（）+'
'）；
$（“#列表”）。追加（内容）
}
})

如果它等于一个列表项，则不会添加它

对于未来的问题：首先尝试用简单的逻辑来解决问题

JavaScript的

alert（）

方法是您的朋友：一个很好的调试工具

相应的JSFIDLE可以在这里找到：

---

明亮的效果很好。我正在使用alert（）尝试调试，但我的头脑被$（这）挂住了，这导致了问题，就好像它正在被缓存一样。正如另一个答案所建议的，在最终实现中使用不同于匹配id的方法可能会更好，但这对于基于@flatline的构建是非常好的，使用

id

s没有什么错，只是不要复制确切的id，而是添加一些内容，如

\li

：

这个

总是指它应该指的东西。代码永远不会错；）在这个问题所基于的主代码中，类已经被使用，但直到现在我还不知道

数据-

。感谢您指出这一点，因为我可能会在某个时候使用

data-

属性替换此ID方法。

if ($('#list > li.' + $(this).attr('id')).length == 0) {
    //doesn't exist!
}

$('a').click(function(){
    var clickedId = $(this).attr('id');
    var add = true;
    
    $('li','#list').each(function(){
      if ($(this).attr('id') == clickedId)
      {
           add = false;   
      }
    });
    
    if (add) 
    {
        var content = '<li id=' + $(this).attr('id') + '>' + $(this).html() + '</li>';
        $('#list').append(content)
    }
})