[JQ权威指南]第四天：使用jQuery子元素过滤选择器_使用jquery子元素过滤选择器选择元素增加每个父元素下的第2个子元素的类别-优快云博客

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/46514731

本文演示了如何使用jQuery的子元素过滤选择器为特定的子元素添加样式。通过简单的HTML列表结构，展示了如何选择每个父元素下的不同子元素，并应用CSS类。此示例特别聚焦于使用`:only-child`选择器来定位那些作为其父元素唯一子元素的项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>使用jQuery子元素过滤选择器</title>
<script language="javascript" type="text/javascript"     src="jquery-2.1.4.js"></script>
<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>
<script type="text/javascript">           
//              $(function(){ //增加每个父元素下的第2个子元素类别       
//                $("li:nth-child(2)").addClass("GetFocus");          
//                })            
//              $(function(){ //增加每个父元素下的第一个子元素类别      
//                $("li:first-child").addClass("GetFocus");        
//              })            
//              $(function(){ //增加每个父元素下的最后一个子元素类别   
//                $("li:last-child").addClass("GetFocus");         
//              })          
                $(function(){ //增加每个父元素下只有一个子元素类别   
                  $("li:only-child").addClass("GetFocus");       
                })    
     </script>
</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>
</body>
</html>