Question

我希望有人可以提供帮助。

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

基本上我想做的事情 - 而不是每当我用新的简报（最近的第一个）更新页面时手动将类分配给第1和第3个div - 是通过jQuery进行顶级分配。但是，我希望count在clearBoth之后重置自己，以确保将类分配给正确的div。

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

目前我有这个功能...

$(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

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

这会带来一些好处：

代码清洁度：这会将客户端呈现代码与服务器端内容代码分开。
可维护性：如果你想改变它，你可以更容易地改变你的CSS风格，而不是重构你的JS（例如，如果你想在路上增加更多的div，那该怎么办？） / LI>
Keep it simple!

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

Answer 3

使用这些选择器：

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

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

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

3 个答案: