仅在.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');                                        

    }

});

Answer 2

在使用上面的代码之后，这就是我需要它工作的方式。希望这会有所帮助。

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'); 
        appended = false;                    

    }

});