jquery ul li第一孩子換顏色

Question

我正在爲一個簡單的菜單工作，點擊每個頂層菜單，打開子菜單，並設置第一個孩子不同的背景顏色。

代碼在這裏：http://jsfiddle.net/X3Dey/

感謝。

Answer 1

$(this).children('.sub-menu-wrap').children().first().css('background','#e9aa9e'); 

你去那裏http://jsfiddle.net/X3Dey/6/

Answer 2

你嘗試選擇你真正要選擇的元素的父元素（我相信）：

$(this).children('.sub-menu-wrap').css('display','block'); 
$(this).children('.sub-menu-wrap:first-child').css('background','#e9aa9e'); 

應該改變（注意我鏈接函數調用，而不是創建一個全新的選擇）：

$(this).children('.sub-menu-wrap').css('display','block').children().first().css('background','#e9aa9e'); 

:first-child僞選擇器過濾它應用到的元素，而不是他們的子元素，你必須明確地選擇子元素，然後限制到第一個元素。

這裏是一個演示：http://jsfiddle.net/X3Dey/4/

您可以通過使用更少的選擇，鏈接在可能的情況，以及使用DOM遍歷函數而不是字符串僞選擇優化代碼：

$('.menu').click(function(){ 

    //reset all menu items 
    $('.sub-menu-wrap').css('display','none').children().css('background','d2ff2d'); 

    //now run the code on the selected menu items 
    $(this).children('.sub-menu-wrap').css('display','block').children().first().css('background','#e9aa9e'); 
}); 

這裏是一個此代碼的演示：http://jsfiddle.net/X3Dey/5/