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

jQuery遍历之closest()方法

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以这样表达

$("div").closet("li')

注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

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

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

  1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
  2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
  3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

具体使用可以参考右边代码区域：

任务

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

找到class="item-1"的li元素
通过closest方法往上找到class=".level-2"的ul元素
加上边框颜色
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.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <style>
  9.     .left {
  10.         width: auto;
  11.         height: 200px;
  12.     }
  13.  
  14.     .left div {
  15.         width: 350px;
  16.         height: 150px;
  17.         padding: 5px;
  18.         margin: 5px;
  19.         float: left;
  20.         background: #bbffaa;
  21.         border: 1px solid #ccc;
  22.     }
  23.  
  24.     span {
  25.         color: blue;
  26.     }
  27.     </style>
  28.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  29. </head>
  30.  
  31. <body>
  32.     <h2>closest方法()</h2>
  33.     <div class="left first-div">
  34.     <div class="div">
  35.         <ul class="level-2">
  36.             <li class="item-a">A</li>
  37.             <li class="item-b">B
  38.                 <ul class="level-3">
  39.                     <li class="item-1">1</li>
  40.                     <li class="item-2">2</li>
  41.                     <li class="item-3">3</li>
  42.                 </ul>
  43.             </li>
  44.             <li class="item-c">C</li>
  45.         </ul>
  46.     </div>
  47.     </div>
  48.     <br/>
  49.     <button>点击：closest传递选择器 </button>
  50.     <button>点击：closest传递一个元素对象</button>
  51.     <script type="text/javascript">
  52.     $("button:first").click(function() {
  53.             //?
  54.     })
  55.     </script>
  56.     <script type="text/javascript">
  57.     $("button:last").click(function() {
  58.         var itemB = $('.item-b')
  59.         $('li.item-1')
  60.             .closest(itemB)
  61.             .css('border', '1px solid blue');
  62.     })
  63.     </script>
  64. </body>
  65.  
  66. </html>
  67.  
下一节