CODEWITHSUNDEEP
jqueryaddclass
V Neal
V Neal

Reputation: 419

Add class to 1st and 3rd div - then reset count and start again

I'm hoping someone can help.

I have a page made up of 3 divs (showing archived newsletters), then a clearBoth - then another row of 3 divs etc.

Basically what i want to do - rather than manually assigning classes to the 1st and 3rd div every time i update the page with a new newsletter (most recent first) - is top assign classes through jQuery. However, i want the count to reset itself after the clearBoth so as to ensure that the classes are assigned to the correct divs.

I understand that jQuery is 0 based, so I would need a class called 'firstPanel' assigned to the 0 div (appears as 1st), and then a class of 'floatRight' assigned to the 2nd (which appears as the 3rd).

Currently I have this function... 

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

Which is generating the following 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>

Now the problem is the classes are not being applied to the right divs.

Any ideas?

Thanks in advance

Upvotes: 1

Views: 1291

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this

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


   });
});

Upvotes: 1

c-smile
c-smile

Reputation: 27470

Use these selectors:

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

if you need repeatable groups of 3 elements each.

Upvotes: 0

marta.joed
marta.joed

Reputation: 366

I'm not sure I understand why you wouldn't just want to assign a class to the 1st and 3rd via your server-side language of choice (I'm assuming that this data is being populated from a datasource via a loop server side?) You could then apply your styles through just CSS. (eg. create your elements with the classes "odd" or "even" and have a corresponding style)

This would have a few benefits:

  1. Code cleanliness: This would separate client-side presentation code from server-side content code.
  2. Maintainability: It's much easier to just change your CSS style rather than have to refactor your JS should you want to change it (for example, what if you should want to add more divs down the road?)
  3. Keep it simple!

Do you need to apply the classes to the child elements as part of a work-around?

Upvotes: 0

Related Questions