使用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支持級別。