在jQuery中,我們可以使用眾多的選擇器來選擇元素,比如標簽選擇器、類選擇器、ID選擇器、屬性選擇器等等。而在這些選擇器中,nth-child()選擇器也是非常實用的一種。
$( "ul li:nth-child(2)" ).css( "color", "red" );
Nth-child()選擇器,顧名思義,就是根據元素在其父元素中的位置來選擇元素。比如上述代碼,我們要選擇一個ul元素中第二個li元素,并將其字體顏色設置為紅色。可以看到,nth-child()選擇器能夠幫助我們快速地找到需要的元素。
除了直接選擇元素,我們也可以使用更加靈活的nth-child()格式。下面是幾個例子:
$( "p:nth-child(odd)" ).css( "background-color", "gray" ); $( "p:nth-child(even)" ).css( "background-color", "lightgray" ); $( "li:nth-child(3n)" ).css( "background-color", "yellow" ); $( "li:nth-child(3n+1)" ).css( "background-color", "lightblue" );
這些代碼可以分別選擇奇數位置的p元素、偶數位置的p元素、所有位置為3的倍數的li元素、所有位置模3余1的li元素,并將它們的背景顏色改變??梢钥吹剑褂胣th-child()選擇器,我們可以輕松地選擇頁面中各種復雜的元素。