使用jQuery自定义样式（仅选择奇数h3s）

Question

我想使用jQuery更改奇数子标题！

我现在有这样的代码：

<script> 
    $(function() { 

    $(".accordion").accordion({ 
     active: false, 
     collapsible: true, 
     heightStyle: "content", 
     alwaysOpen: false 
    }); 

    $(".accordion .accordion h3:odd").css("background-color", "white"); 

    }); 
    </script> 


    <p class="question" style="font-size: 19px!important;"> 
    Contact Us: 
    </p> 

    <p class="answer"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    </p> 


    <p class="question" style="font-size: 19px!important;"> 
    Frequently Asked Questions: 
    </p> 



<div class="accordion"> 


    <h3>My Account</h3> 

    <div class="accordion"> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 


    </div> 

<div class="accordion"> 


    <h3>My Account</h3> 

    <div class="accordion"> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3> 
    <div> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     </p> 
    </div> 


    </div> 

结果是不是100％确定。

当我有这样的事情在灰色行结束：

在下一个我得到的子标题开始用白色BG，而不是一个灰色的：

我没有成功使用CSS 它，如果你inssist帮助我的CSS，是我的客人:)

http://jsfiddle.net/09c2q7xo/4/做*着增加<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Answer 1

用一个简单的CSS选择器替换您的jQuery：

.accordion .accordion h3:nth-of-type(2n) { 
    background-color: white; 
} 

见fiddle。

注意：这需要CSS3支持级别。