首页 > 代码库 > 过滤选择器——子元素过滤选择器

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

2024-07-26 23:05:20   226人阅读

在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器: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="http://www.mamicode.com/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

 

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


联系
我们