Jquery 将类添加到第一和第三分区-然后重置计数并重新开始

我希望有人能帮忙

我有一个由3个分区组成的页面（显示存档的新闻稿），然后是一个ClearTweet，然后是另一行3个分区，等等

基本上，我想做的是通过jQuery来分配顶级类，而不是每次用新的时事通讯（最近的第一次）更新页面时都手动将类分配到第1和第3个div。但是，我希望计数在clearTweet之后重置自己，以确保类被分配到正确的div

我知道jQuery是基于0的，所以我需要将一个名为“firstPanel”的类分配给0 div（显示为第一个），然后将一个名为“floatRight”的类分配给第二个div（显示为第三个）

目前我有这个功能

$(function(){
$('.newsletterPanel:nth-child(1n)').addClass('firstPanel');
$('.newsletterPanel:nth-child(2n)').removeClass('firstPanel');
$('.newsletterPanel:nth-child(3n)').addClass('floatRight');
});

正在生成以下HTML

<div class="newsletterPanel"><a class="panelLink" href="/emailnewsletters/2011-06-29/online.html" target="_blank">View newsletter </a>
          <div class="newsletterInfo">
            <p>Broadcasted on 29/06/2011</p>
            <p class="genericLinkButton"><a href="/emailnewsletters/2011-06-29/online.html" target="_blank" rel="group">View June's newsletter <span class="smallArrow">&gt;</span></a></p>

          </div>
        </div>
        <div class="newsletterPanel firstPanel"><a class="panelLink" href="/emailnewsletters/2011-05-25/online.html" target="_blank">View newsletter </a>
          <div class="newsletterInfo">
            <p>Broadcasted on 25/05/2011</p>
            <p class="genericLinkButton"><a href="/emailnewsletters/2011-05-25/online.html" target="_blank" rel="group">View May's newsletter <span class="smallArrow">&gt;</span></a></p>
          </div>

        </div><div class="clearBoth"></div>
        <div class="newsletterPanel floatRight"><a class="panelLink" href="/emailnewsletters/2011-04-27/online.html" target="_blank">View newsletter </a>
          <div class="newsletterInfo">
            <p>Broadcasted on 27/04/2011</p>
            <p class="genericLinkButton"><a href="/emailnewsletters/2011-04-27/online.html" target="_blank" rel="group">View April's newsletter <span class="smallArrow">&gt;</span></a></p>
          </div>
        </div>


        <div class="newsletterPanel firstPanel"><a class="panelLink" href="/emailnewsletters/2011-03-09/online.html" target="_blank">View newsletter </a>
          <div class="newsletterInfo">
            <p>Broadcasted on 09/03/2011</p>
            <p class="genericLinkButton"><a href="/emailnewsletters/2011-03-09/online.html" target="_blank" rel="group">View March's newsletter <span class="smallArrow">&gt;</span></a></p>
          </div>
        </div>
        <div class="newsletterPanel"><a class="panelLink" href="/emailnewsletters/2011-01-27/online.html" target="_blank">View newsletter </a>

          <div class="newsletterInfo">
            <p>Broadcasted on 27/01/2011</p>
            <p class="genericLinkButton"><a href="/emailnewsletters/2011-01-27/online.html" target="_blank" rel="group">View January's newsletter <span class="smallArrow">&gt;</span></a></p>
          </div>
        </div>

      </div>

2011年6月29日播出


2011年5月25日播出


2011年4月27日播出


2011年3月9日播出


2011年1月27日播出

现在的问题是这些类没有应用到正确的div

有什么想法吗

---

提前感谢

我不知道为什么您不想通过您选择的服务器端语言将类分配给第1个和第3个（我假设这些数据是通过循环服务器端从数据源填充的？），然后您可以通过CSS应用您的样式。（例如，使用“奇”或“偶”类创建元素，并具有相应的样式）

这将有几个好处：

代码清洁：这将把客户端表示代码与服务器端内容代码分开

可维护性：如果您想更改CSS样式，只需更改CSS样式比重构JS容易得多（例如，如果您想添加更多div怎么办？

---

作为解决方案的一部分，您是否需要将类应用于子元素？

我不知道为什么您不想通过选择的服务器端语言将类分配给第1个和第3个元素（我假设此数据是通过循环服务器端从数据源填充的？）然后，您可以通过CSS应用样式。（例如，使用“奇”或“偶”类创建元素，并具有相应的样式）

这将有几个好处：

代码清洁：这将把客户端表示代码与服务器端内容代码分开

可维护性：如果您想更改CSS样式，只需更改CSS样式比重构JS容易得多（例如，如果您想添加更多div怎么办？

作为解决方案的一部分，是否需要将类应用于子元素？

使用以下选择器：

newsletterPanel:nth-child(3n+1)
newsletterPanel:nth-child(3n+2)
newsletterPanel:nth-child(3n+3)

如果您需要每个3个元素的可重复组。

请使用以下选择器：

newsletterPanel:nth-child(3n+1)
newsletterPanel:nth-child(3n+2)
newsletterPanel:nth-child(3n+3)

如果您需要每个3个元素的可重复组。

试试这个

$(function(){
   var $this, count = 0, className;
   $('div.newsletterPanel').each(function(i){

       $this = $(this);
       if($this.next().is("div.clearBoth")){
          count = 0;
          $this.addClass("floatRight");
       }
       else{
        if(count == 0)
          $this.addClass("firstPanel");
        else if(count == 1)
          $this.removeClass("firstPanel");

        count++;
       }


   });
});

试试这个

$(function(){
   var $this, count = 0, className;
   $('div.newsletterPanel').each(function(i){

       $this = $(this);
       if($this.next().is("div.clearBoth")){
          count = 0;
          $this.addClass("floatRight");
       }
       else{
        if(count == 0)
          $this.addClass("firstPanel");
        else if(count == 1)
          $this.removeClass("firstPanel");

        count++;
       }


   });
});

---

你好HTML不是通过数据源填充的，页面是静态的。目前，我将这些类硬编码在HTML中，但是当一份时事通讯被归档时，它会被添加到归档的前面——这意味着我必须遍历其余的div并手动更改这些类，以使它们仍然适合3到一行。例如July应该有一个firstPanel类，June没有额外的类，May有一个rightPanel类。加入八月后，当七月和五月的课程转移到新行/新位置时，我需要手动完成并更改它们。我只是想，如果我从所有的面板开始，都有一个类“通讯面板”（它应用了背景图像等-然后可以使用jQuery应用定位类，这将为我节省很多麻烦。显然，最简单的解决方案是让它们先显示最旧的，然后不需要在现有的div上更改类，因为我将添加到末尾-但理想情况下，我希望它们显示mos首先是最近的。希望这有意义吗？这张图片中会有服务器吗？或者这更像是JS中的一个单页应用程序？嗨。HTML不是通过数据源填充的，页面是静态的。我目前在HTML中硬编码了类，但是当新闻稿存档时，它会添加到存档的前面-这意味着然后我必须检查其余的div并手动更改类，以使它们仍然适合3排。例如…July应该有firstPanel类，June没有额外的类，May有rightPanel类。添加August后，我需要手动检查并更改July和May的类作为y移动到新行/新位置。我只是想，如果我从所有面板开始，都有“通讯面板”类（它应用了背景图像等-然后可以使用jQuery应用定位类，这将为我节省很多麻烦。显然，最简单的解决方案是让它们先显示最旧的，然后不需要在现有的div上更改类，因为我将添加到末尾-但理想情况下，我希望它们显示most最近的第一次。希望这有意义吗？这张图片中会有服务器吗？或者这更像是JS中的一个单页应用程序？太棒了！谢谢你，这将节省我大量的手动编辑！太棒了！谢谢你，这将节省我大量的手动编辑！