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');                                        

    }

});

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;                    

    }

});