在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
子元素过滤选择器语法
示例——使用jQuery子元素过滤选择器选择元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="/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"> 9body{font-size:12px;text-align:center}10ul{width:241px;list-style-type:none;padding:0px}11ul 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}) 2627$(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
