當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

过滤选择器——子元素过滤选择器

發布時間：2025/3/15 编程问答 10 豆豆

生活随笔收集整理的這篇文章主要介紹了过滤选择器——子元素过滤选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在頁面開發過程中，常常遇到突出指定某行的需求。雖然使用基本過濾選擇器:eq(index)可以實現單個表格的顯示，但不能滿足大量數據和多個表格的選擇需求。為了實現這樣的功能，jQuery中可以通過子元素過濾選擇器輕松獲取所有父元素中指定的某個元素。

子元素過濾選擇器語法

選擇器	功能	返回值
?:nth-child(eq\|even\|odd\|index)	?獲取每個父元素下的特定位置元素，索引號從1開始	元素集合
?:first-child	?獲取每個父元素下的第一個子元素	元素集合
?:last-child	?獲取每個父元素下的最后一個子元素	元素集合
?:only-child	?獲取每個父元素下的僅有一個子元素	元素集合

示例——使用jQuery子元素過濾選擇器選擇元素

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery層次選擇器</title> 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center} 10 ul{width:241px;list-style-type:none;padding:0px} 11 ul li{height:23px;width:60px;line-height:23px; 12 float:left;border-top:solid 1px #eee; 13 border-bottom:solid 1px #eee;margin-bottom:5px} 14 .GetFocus{width:58px;border:solid 1px #666; 15 background-color:#eee} 16 </style> 17 <script type="text/javascript"> 18 19 $(function(){ // 增加每個父元素下的第2個子元素類別 20 //$("li:nth-child(2)").addClass("GetFocus"); 21 }) 22 23 $(function(){ // 增加每個父元素下的第一個子元素類別 24 //$("li:first-child").addClass("GetFocus"); 25 }) 26 27 $(function(){ // 增加每個父元素下的最后一個子元素類別 28 //$("li:last-child").addClass("GetFocus"); 29 }) 30 31 $(function(){ // 增加每個父元素下只有一個子元素類別 32 //$("li:only-child").addClass("GetFocus"); 33 }) 34 </script> 35 </head> 36 <body> 37 <ul> 38 <li>Item 1-0</li> 39 <li>Item 1-1</li> 40 <li>Item 1-2</li> 41 <li>Item 1-3</li> 42 </ul> 43 <ul> 44 <li>Item 2-0</li> 45 <li>Item 2-1</li> 46 <li>Item 2-2</li> 47 <li>Item 2-3</li> 48 </ul> 49 <ul> 50 <li>Item 3-0</li> 51 </ul> 52 </body> 53 </html> Demo

轉載于:https://www.cnblogs.com/duffy/p/4022161.html

總結

以上是生活随笔為你收集整理的过滤选择器——子元素过滤选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。