子元素选择器

$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)"),索引,从1开始

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 5   </head>
 6   <body>
 7     <ul>
 8       <li>John</li>
 9       <li>Karl</li>
10       <li>Brandon</li>
11     </ul>
12     <ul>
13       <li>Glen</li>
14       <li>Tane</li>
15       <li>Ralph</li>
16     </ul>
17     <ul>
18       <li>Jack</li>
19     </ul>
20     <script type="text/javascript">
21     /*1)迭代每个ul中第1个li元素中的内容,索引从1开始
22         $("ul li:first-child").each(function(){
23             //alert( this.html() );错误,dom对象.调用jquery方法
24             alert( $(this).html() );//正确
25         });
26         $("ul li:nth-child(1)").each(function(){
27             alert( $(this).html() );
28         });
29         */    
30         
31         
32     
33      /*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
34          $("ul li:last-child").each(function(){
35              alert( $(this).html() );
36          });
37          $("ul li:nth-child(3)").each(function(){
38              alert( $(this).html() );
39          });
40          $("ul li:nth-child(3)").each(function(){
41              alert($(this).html())
42              });
43      
44          */ 
45      /*3)在ul中查找是唯一子元素的li元素的内容
46          */
47          $("ul li:only-child").each(function(){
48              alert(   $(this).html()   );
49          });
50     </script>
51   </body>
52 </html>
原文地址:https://www.cnblogs.com/friends-wf/p/3808804.html