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>
----走出会议室,只有执行力
解决问题是衡量能力的标准。