如何将交替颜色设置为具有特定类的嵌套和兄弟div。

Question

我有一个嵌套列表，每个列表项都有一个带有类R的容器div 我试图将交替的颜色应用于交替的div。问题是与班级的div并不总是兄弟姐妹。

这是我的HTML：

id

这就是我希望它看起来的样子（我用内联css编码颜色）

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

Answer 1

试试这个：您可以使用:odd和:even jQuery选择器来获取奇数和偶数div并相应地应用背景颜色。见下面的代码

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

Answer 2

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

Answer 3

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