在每个循环内追加一次

我正在构建一个功能，告诉读者他们已经阅读了特定的帖子。要做到这一点，我需要通知用户，我通过将一个元素添加到.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警报”只有一次的文章容器内？

来源

2012-06-11 onestepcreative

在.each（）回调中返回false将停止循环继续。 – dqhendricks

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

    } 

});

来源

2012-06-11 22:42:58 Jay

如果我需要遍历多个“.article-containers”，这仍然可以工作吗？我每次循环播放10个帖子，这就是我问的原因。 – onestepcreative

是的，该变量只会导致它跳过附加HTML，它仍然会覆盖尽可能多的.article容器（例如10）。 – Jay

真棒，谢谢你，杰伊！ – onestepcreative

上面的代码打转转之后，这是得到它的工作，我需要它的工作方式。希望这可以帮助。

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;      

    } 

});

来源

2012-06-11 23:05:59 onestepcreative

在每个循环内追加一次

回答

相关问题