javascript - 在 .Each 循环中仅追加一次

Question

我正在构建一个功能，它可以告诉读者他们已经阅读了一篇特定的文章。为此，我需要通知用户，我通过将元素附加到 .article 来做到这一点。我遇到的问题是，因为我在 .each 循环中追加，所以该元素追加了 4 次。

这是我的代码:

$('.article-container').each(function() {

    // CHECK IF THE DATA IS IN THE ARRAY    
    if(cookieValue.indexOf($(this).data('id')) != -1) {                     

        $(this).addClass('readit');                                         
        $('<h4 class="readit-alert">You&apos;ve read it!</h4>').appendTo('.article-container.readit');

    } else {

        // OTHERWISE, ADD CLASS NOT READ                
        $(this).addClass('notread');                                        

    }

});

这是它返回的内容:

<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>

如何才能在文章容器中仅附加一次“readit-alert”？

Answer 1

如果要停止循环执行，请在附加后添加return false;。

否则，在函数外部有一个全局 var appended = false;，然后在附加它后将其设置为 true。

即:

var appended = false;

$('.article-container').each(function() {

    // CHECK IF THE DATA IS IN THE ARRAY    
    if(cookieValue.indexOf($(this).data('id')) != -1) {                     

        $(this).addClass('readit');   

        if (!appended){                                      
                $('<h4 class="readit-alert">You&apos;ve read it!</h4>').appendTo('.article-container.readit');
                appended = true;
        }
    } else {

        // OTHERWISE, ADD CLASS NOT READ                
        $(this).addClass('notread');                                        

    }

});