子元素过滤选择器

在页面开发中，总是遇到突出指定某行的需求。如果实现单个表格的显示，用基本过滤选择器:eq(index)就能实现；但如果是大量数据的选择需求可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。详细如下：

下面将通过示例来讲解如何使用子元素过滤选择器获取元素。

示例如下：

(1)描述

描述：页面中，创建三个ul标记，前两个标记中设置四个li,后一个标记中设置一个li，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态，显示在页面中。

(2)代码实现

...省略代码
<script type="text/javascript">
$(function(){ //增加每个父元素下的第2个子元素类别 1
    $("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别  2
    $("li:first-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下的最后一个子元素类别  3
    $("li:last-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下只有一个子元素类别  4
    $("li:only-child").addClass("GetFocus"); 
})
</script>
...省略代码
    <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>
...省略代码