11. jQuery子元素過濾選擇器
阿新 • • 發佈：2018-12-09
<!DOCTYPE html> <html> <head> <title>jQuery子元素過濾選擇器</title> <style type="text/css"> body{font-size:12px;text-align:center} ul{width:241px;list-style-type:none;padding:0px} ul li{height:23px;width:60px;line-height:23px; float:left;border-top:solid 1px #eee; border-bottom:solid 1px #eee;margin-bottom:5px} .GetFocus{width:58px;border:solid 1px #666; background-color:#eee} </style> </head> <body> <ul> <li>Item 1-0</li> <li>Item 1-1</li> <li>Item 1-2</li> <li>Item 1-3</li> </ul> <ul> <li>Item 2-0</li> <li>Item 2-1</li> <li>Item 2-2</li> <li>Item 2-3</li> </ul> <ul> <li>Item 3-0</li> </ul> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //增加每個父元素下只有一個子元素類別 $("li:only-child").addClass("GetFocus"); //增加每個父元素下的第最後一個元素類別 //$("li:last-child").addClass("GetFocus"); //增加每個父元素下的第一個子元素類別 //$("li:first-child").addClass("GetFocus"); //增加每個父元素下的第二個子元素類別 //$("li:nth-child(2)").addClass("GetFocus"); }) </script> </body> </html>