jquery parent parents parentsUntil

parent   父级   上一层  仅一层

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <!--jquery  parent-->
 5 <style>
 6 .ancestors *
 7 { 
 8 display: block;
 9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19  $("#span").parent().css({"color":"red","border":"2px solid red"});
20 //$("span").parent().css({"color":"red","border":"2px solid red"});//自行测试比较
21 });
22 </script>
23 </head>
24 
25 <body class="ancestors"> body (body层)
26   <div style="width:500px;">div (div父)
27     <ul>ul (ul层)  
28       <li>li (li层)
29         <span id = 'span'>span（span层）</span>
30       </li>
31       <li>li (li层)
32         <span>span（span层）</span>
33       </li>
34     </ul>   
35   </div>
36 </body>
37 </html>

 

 

parents 父级   上N层   直达根

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .ancestors *
 6 { 
 7 display: block;
 8 border: 2px solid lightgrey;
 9 color: lightgrey;
10 padding: 5px;
11 margin: 15px;
12 }
13 </style>
14 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
15 </script>
16 <script>
17 $(document).ready(function(){
18  $("#span").parents("li").css({"color":"red","border":"2px solid red"});
19 // $("#span").parents().css({"color":"red","border":"2px solid red"});//自行比较
20 });
21 </script>
22 </head>
23 
24 <body class="ancestors"> body (body层)
25   <div style="width:500px;">div (div父)
26     <ul>ul (ul层)  
27       <li>li (li层)
28         <span id = 'span'>span（span层）</span>
29       </li>
30       <li>li (li层)
31         <span>span（span层）</span>
32       </li>
33     </ul>   
34   </div>
35 </body>
36 </html>

 

 

parentsUntil    指定层之间

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <!--parentsUntil-->
 5 <style>
 6 .ancestors *
 7 { 
 8 display: block;
 9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19   $("#span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 
24 <body class="ancestors"> body (body层)
25   <div style="width:500px;">div (div父)
26     <ul>ul (ul层)  
27       <li>li (li层)
28         <span id = 'span'>span（span层）</span>
29       </li>
30       <li>li (li层)
31         <span>span（span层）</span>
32       </li>
33     </ul>   
34   </div>
35 </body>
36 </html>

 

 

 

posted @ 2013-09-30 11:28  猿来如些  阅读(247)  评论(0)    收藏  举报