6-4 jQuery遍历之parents()方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery遍历之parents()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法

parents()无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;

返回的元素秩序是从离他们最近的父级元素开始的

注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素

parents()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

注意事项：

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2  $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

具体的操作，请参考右边的代码

任务

请在右边代码区域的第75行填入任务代码

找到class="item-b"元素的所有祖辈元素
并且附上一个红色的边框
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left {
  9.         width: auto;
  10.         height: 350px;
  11.     }
  12.  
  13.     .left div {
  14.         width: 350px;
  15.         height: 150px;
  16.         padding: 5px;
  17.         margin: 5px;
  18.         float: left;
  19.         background: #bbffaa;
  20.         border: 1px solid #ccc;
  21.     }
  22.  
  23.     span {
  24.         color: blue;
  25.     }
  26.     </style>
  27.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  28. </head>
  29.  
  30. <body>
  31.     <h2>parents方法()</h2>
  32.     <div class="left first-div">
  33.  
  34.         <div class="div">
  35.             <ul class="level-2">
  36.                 <!-- A -->
  37.                 <li class="item-a">A</li>
  38.                 <!-- B -->
  39.                 <li class="item-b">B
  40.                     <ul class="level-3">
  41.                         <li class="item-1">1</li>
  42.                         <li class="item-2">2</li>
  43.                         <li class="item-3">3</li>
  44.                     </ul>
  45.                 </li>
  46.                 <!-- C -->
  47.                 <li class="item-c">C</li>
  48.             </ul>
  49.         </div>
  50.  
  51.         <div class="div">
  52.             <ul class="level-2">
  53.                 <!-- A -->
  54.                 <li class="item-a">A</li>
  55.                 <!-- B -->
  56.                 <li class="item-b">B
  57.                     <ul class="level-3">
  58.                         <li class="item-1">1</li>
  59.                         <li class="item-2">2</li>
  60.                         <li class="item-3">3</li>
  61.                     </ul>
  62.                 </li>
  63.                 <!-- C -->
  64.                 <li class="item-c">C</li>
  65.             </ul>
  66.         </div>
  67.  
  68.     </div>
  69.  
  70.     <button>点击：parents无参数</button>
  71.     <button>点击：parents传递选择器</button>
  72.  
  73.     <script type="text/javascript">
  74.     $("button:first").click(function() {
  75.         //?
  76.     })
  77.     </script>
  78.  
  79.     <script type="text/javascript">
  80.     $("button:last").click(function() {
  81.         //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
  82.         //并且附上一个边
  83.         $('.item-b').parents('.first-div').css('border', '2px solid blue')
  84.     })
  85.     </script>
  86. </body>
  87.  
  88. </html>
  89.  
下一节