EXAMPLE

Question

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

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

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

这个jQuery脚本应该检查点击链接的ID是否与列表中li元素的任何ID匹配。如果没有，它会附加一个新的li元素，其ID与点击的链接相同。

<ul id="list"></ul>

<script>
$(document).on('click', 'a', function(){
    if($('#list').children('li').attr('id') != $(this).attr('id')) {
        var content = '<li id=' + $(this).attr('id') + '>' + $(this).html() + '</li>';
        $('#list').append(content)
    }
})
</script>

正在生成ID和内容，但脚本仅适用于单击的第一个元素，因此输出类似于：

a
b
b
c
c

Answer 1

尝试调试：

EXAMPLE

您将看到.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)
    }
})

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

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

JavaScript的alert( )方法是你的朋友：一个很好的调试工具。

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

SOLUTION

Answer 2

首先，元素id必须是唯一的。请改用类或data-属性。

其次，.attr('whatever')返回集合中第一个项的值。更好的方法是尝试选择元素，然后检查集合的长度：

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

请注意，我的示例中的选择器使用li的类，而不是id。

单击时附加元素的jQuery重复项

2 个答案:

EXAMPLE

SOLUTION