将类添加到第 1 和第 3 个 div - 然后重置计数并重新开始

Question

我希望有人能提供帮助。

我有一个由 3 个 div 组成的页面（显示存档的新闻通讯），然后是一个clearBoth - 然后是另一行 3 个 div 等。

基本上我想做的 - 而不是每次更新时手动将类分配给第一个和第三个 div带有新新闻通讯的页面（最新的在前） - 是通过 jQuery 分配类的顶部。但是，我希望计数在 ClearBoth 之后重置自身，以确保将类分配给正确的 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>

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

有什么想法吗？

提前致谢

Answer 1

试试这个

$(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++;
       }


   });
});

Answer 2

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

这将有一些好处：

1. 代码清洁度：这会将客户端表示代码与服务器端内容代码分开。
2. 可维护性：如果您想更改 CSS 样式，则比重构 JS 更容易（例如，如果您想在以后添加更多 div 该怎么办？）
3. 保持简单！

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

Answer 3

使用这些选择器：

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

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