CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SamuraiJack
SamuraiJack

Reputation: 5539

How to set alternating color to nested and sibling divs with certain class.

I have a nested list, each list item has a container div with class R I am trying to apply alternating colors to alternate divs. The problem is that divs with class are not always siblings.

This is my html:

<ul>
    <li>
        <div class="R">Bat</div>
        <div class="R">description</div>
    </li>
    <li>
        <div class="R">Cat</div>
    </li>
    <li>
        <div class="R">Rat</div>
        <ul>
            <li>
                <div class="R">one
                    <div class="R">blah</div>
                    <div class="R">blah blah</div>
                </div>
            </li>
            <li>
                <div class="R">two
                    <div>
            </li>
            <li>three</li>
        </ul>
    </li>
</ul>

This is how I want it to look(I have harcoded colors with inline css)

<ul>
  <li>
    <div class="R" style="background-color:red;">Bat</div>
    <div class="R" style="background-color:green;">description</div>
  </li>
  <li>
    <div class="R" style="background-color:red;">Cat</div>
  </li>
  <li>
    <div class="R" style="background-color:green;">Rat</div>
    <ul>
      <li>
        <div class="R" style="background-color:red;">one
          <div class="R" style="background-color:green;">blah</div>
          <div class="R" style="background-color:red;">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R" style="background-color:green;">two
          <div>
      </li>

    </ul>
  </li>
</ul>

Upvotes: 0

Views: 798

Answers (3)

Atul Nagpal
Atul Nagpal

Reputation: 857

$(document).ready(function() {
  $(".R:even").css("background-color", "green");
  $(".R:odd").css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="R">Bat</div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R">Cat</div>
  </li>
  <li>
    <div class="R">Rat</div>
    <ul>
      <li>
        <div class="R">one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R">two</div>
      </li>
      <li>Three</li>
    </ul>
  </li>
</ul>

$(function() {
  $('ul div.R:odd').addClass('oddRow');
  $('ul div.R:even').addClass('evenRow');
});
.oddRow {
  background-color: red;
}
.evenRow {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="R">Bat</div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R">Cat</div>
  </li>
  <li>
    <div class="R">Rat</div>
    <ul>
      <li>
        <div class="R">one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R">two</div>
      </li>
      <li>Three</li>
    </ul>
  </li>
</ul>

Upvotes: 2

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

$('div.R').each(function(index) {
  $(this).css('background-color', index % 2 === 0 ? '#cc0' : '#0cc');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>
    <div class="R">Bat</div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R">Cat</div>
  </li>
  <li>
    <div class="R">Rat</div>
    <ul>
      <li>
        <div class="R">one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R">two</div>
      </li>
      <li>three</li>
    </ul>
  </li>
</ul>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : you can use :odd and :even jQuery selectors to get odd and even divs and apply background color accordingly. See below code

$(function() {
  $('ul div.R:odd').addClass('oddColor');
  $('ul div.R:even').addClass('evenColor');

});
.oddColor {
  background-color: red;
}
.evenColor {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="R">Bat</div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R">Cat</div>
  </li>
  <li>
    <div class="R">Rat</div>
    <ul>
      <li>
        <div class="R">one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R">two
          <div>
      </li>
      <li>three</li>
    </ul>
  </li>
</ul>

Upvotes: 3

Related Questions