How to use jQuery nth-child to color every other div in parent and rest on new parent?

Question

Have to support IE8 so no just css.

I am trying to color the odds and evens of each parent div and reset the color when it hits the new parent div. Hope that makes sense. Here is an example:

<div class="date">
<h2>Content</h2>
(White BGColor this div)<div class="option-heading"> 
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <p>Content</p>
</div>
(ignore)<div class="option-content">
    <p>Content</p>
</div>
(Blue BGColor this div)<div class="option-heading"> 
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <p>Content</p>
</div>
(ignore)<div class="option-content">
    <p>Content</p>
</div>
(White BGColor this div)<div class="option-heading"> 
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <p>Content</p>
</div>
(ignore)<div class="option-content">
    <p>Content</p>
</div>
</div>
(reset to color first white)
<div class="date">
<h2>Content</h2>
(White BGColor this div)<div class="option-heading"> 
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <p>Content</p>
</div>
(ignore)<div class="option-content">
    <p>Content</p>
</div>
(Blue BGColor this div)<div class="option-heading"> 
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <p>Content</p>
</div>
(ignore)<div class="option-content">
    <p>Content</p>
</div>
</div>

I use this jQuery

           $ ('div.option-heading p:odd').css("background-color","#e3e8ea");
       $ ('div.option-heading p:even').css("background-color","#fff");

But it doesn't reset on the new parent div.

Thanks all for you input. Answer: $('div.date').each(function() { $(this).find('div.option-heading p:odd').css('background-color', '#e3e8ea'); $(this).find('div.option-heading p:even').css('background-color','#fff'); }); — RooksStrife, Jun 13 '14 at 20:45

Brian Noah · Answer 1 · 2014-06-13T20:55:23.770

Based on comment, this might do it.

<div class="date">
    <h2>Content</h2>
    <div class="option-heading"> 
        <div class="arrow-up">&#9650;</div>
        <div class="arrow-down">&#9660;</div>
        <p>Content</p>
    </div>
    <div class="option-content">
        <p>Content</p>
    </div>
    <div class="option-heading"> 
        <div class="arrow-up">&#9650;</div>
        <div class="arrow-down">&#9660;</div>
        <p>Content</p>
    </div>
    <div class="option-content">
        <p>Content</p>
    </div>
    <div class="option-heading"> 
        <div class="arrow-up">&#9650;</div>
        <div class="arrow-down">&#9660;</div>
        <p>Content</p>
    </div>
    <div class="option-content">
        <p>Content</p>
    </div>
</div>

<div class="date">
    <h2>Content</h2>
    <div class="option-heading"> 
        <div class="arrow-up">&#9650;</div>
        <div class="arrow-down">&#9660;</div>
        <p>Content</p>
    </div>
    <div class="option-content">
        <p>Content</p>
    </div>
    <div class="option-heading"> 
        <div class="arrow-up">&#9650;</div>
        <div class="arrow-down">&#9660;</div>
        <p>Content</p>
    </div>
    <div class="option-content">
        <p>Content</p>
    </div>
</div>


$('.date').each(function () {
    var $date = $(this);
    $('div.option-heading:odd', $date).css("background-color","#e3e8ea");
    $('div.option-heading:even', $date).css("background-color","#fff");
});

No dice... still doesn't reset to color the first item white on the new date div. It colors every other white blue white blue (which it did before). What I need it to do is white blue white (new date div come reset count) white blue (new date div) white. — RooksStrife, Jun 13 '14 at 20:34

Karl-André Gagnon · Answer 2 · 2014-06-13T20:35:58.643

0

Even and odd are base on the children position. Since the p is in most case the only children of the div, they are almost all first-child or in your case odd.

Use their index instead:

$('.date').each(function(){
    $(this).find('div.option-heading p').css("background-color", function(i){
        return i%2 ? '#e2e8ea' : '#fff';
    });
});

Fiddle : http://jsfiddle.net/mc3VT/3/

edited Jun 13 '14 at 20:35

answered Jun 13 '14 at 20:30

Karl-André Gagnon

33,662
5
50
75

score 0 · Accepted Answer · answered Jun 13 '14 at 20:35

0

You could use a loop on the parent elements so every time the code reaches a new parent element (<div class="date"></div> in your case), it will reset the styles:

$('div.date').each(function() {
  $(this).find('div.option-heading:odd').css('background-color', '#e3e8ea');
  $(this).find('div.option-heading:even').css('background-color','#fff');
});

answered Jun 13 '14 at 20:35

Web Guy Ian

506
3
9

Used this and didn't work added the p:odd p:even = worked :] $('div.date').each(function() { $(this).find('div.option-heading p:odd').css('background-color', '#e3e8ea'); $(this).find('div.option-heading p:even').css('background-color','#fff'); }); – RooksStrife Jun 13 '14 at 20:41
I don't see where you have the `
` element except for where the `
Content
` is, but if it worked for you, great. – Web Guy Ian Jun 13 '14 at 20:43
Right - oddly enough without the p: it does nothing. Thanks for the help. – RooksStrife Jun 13 '14 at 20:47

score 0 · Answer 4 · answered Jun 13 '14 at 20:59

You can set a personal attrubute to the divs, if you did it you would use the nex code

<p myAttr='odd'>···</p>
<p myAttr='even'>···</p>

and in jquery code

$ ('div.option-heading p[myAttr=odd]').css("background-color","#e3e8ea");
$ ('div.option-heading p[myAttr=even]').css("background-color","#fff");

and remember that DOM objects wont be affected by the code, for that you need to execute these lines after create the DOM objects, or using pure css

p[myAttr=odd]{background-color:#e3e8ea;}
p[myAttr=even]{background-color:#fff;}

How to use jQuery nth-child to color every other div in parent and rest on new parent?

4 Answers4