jQuery：nth-​​child（）selector

Question

jQueryを使用してWordpress内のナビゲーションメニューをドロップダウンするCSSスタイルを適用する際に問題があります。

基本的には、5つのナビゲーションリンクがあります。その目的は、それぞれのドロップダウンリンクに独自の色を持たせることです。私が使用しているコードは、例えば、すべてのリンクがドロップダウンを持っているとしたら、うまくいくようです。しかし、2番目のリンクと4番目のリンクだけをドロップダウンした場合、4番目のリンクドロップダウンカラーは3番目のドロップダウンカラーの色を使用します。つまり、nth-child（4）は＃37595cを使用する必要がありますnth-child（3）の色を使用します。この問題を解決するための助けをいただければ幸いです。以下のコード：

$(document).ready(function(){ 
    $("#nav_main ul li:nth-child(1) ul.sub-menu a").css("background", "#9c1b36"); 
    $("#nav_main ul li:nth-child(2) ul.sub-menu a").css("background", "#808021"); 
    $("#nav_main ul li:nth-child(3) ul.sub-menu a").css("background", "#4a3349"); 
    $("#nav_main ul li:nth-child(4) ul.sub-menu a").css("background", "#37595c"); 
    $("#nav_main ul li:nth-child(5) ul.sub-menu a").css("background", "#41403e"); 
}); 

jsfiddleで問題を再現しましたか？ 「Nav Two」と「Nav Four」にカーソルを合わせると、「Nav Four」は「Nav Three」が有効な場合に使用される色を使用していることがわかります。http://jsfiddle.net/cknz/vmRBp/3/

Answer 1

> ULが#nav_mainの子であり、LIがULの子であることを確認してください。そしてnth-of-type代わりのnth-child使用：

$("#nav_main > ul > li:nth-of-type(1) a").css("background", "#9c1b36"); 
    $("#nav_main > ul > li:nth-of-type(2) a").css("background", "#808021"); 
    $("#nav_main > ul > li:nth-of-type(3) a").css("background", "#4a3349"); 
    $("#nav_main > ul > li:nth-of-type(4) a").css("background", "#37595c"); 
    $("#nav_main > ul > li:nth-of-type(5) a").css("background", "#41403e");