closest()---jquery的一个事件委托方法

closest()用法：.closest(selector)官方说法：closest() 方法获得selector的第一个祖先元素，从当前元素开始沿 DOM 树向上。贴上W3C教程的例子代码<ul i

closest()用法：

.closest(selector)

官方说法：closest() 方法获得selector的第一个祖先元素，从当前元素开始沿 DOM 树向上。贴上W3C教程的例子代码

<ul id="one" class="level-1">  <li class="item-i">I</li>  <li id="ii" class="item-ii">II  <ul class="level-2">    <li class="item-a">A</li>    <li class="item-b">B      <ul class="level-3">        <li class="item-1">1</li>        <li class="item-2">2</li>        <li class="item-3">3</li>      </ul>    </li>    <li class="item-c">C</li>  </ul>  </li>  <li class="item-iii">III</li></ul>

本人理解：先从selector本身出发，如果本身不符合，就会从DOM树向上遍历，知道遍历到符合且最近的；

• 举个本身就符合的例子；

$('li.item-a').closest('li').css('background-color', 'red');    //$('li.item-a')本身就是符合，就是需要匹配最近的li，所自身的背景变成红色

• 第二个例子，向上选择第一个ul父亲

$('li.item-a').closest('ul').css('background-color', 'red');

这样整个ul.level-2的背景都会变红，而不是ul.level-3，因为是向上遍历，之遍历父亲，不遍历儿子

• 实战中的例子

$(document).click (function (e){    var target = $(e.target);     if(target.closest(".dropdown-menu").length == 0){     	if($(".dropdown-menu").hasClass("show")){			$(".dropdown-menu").removeClass("show");		}	} });

这段代码我理解的意思是：在文档中随意点击，target变量就是被点击元素了，假如target向上遍历不到.dropdown-menu的话，就执行if里面的语句，也就是说，除非点击到.dropdown-menu的后代元素，不然都不会执行if里的语句。

这段代码的功能是，点击文档任意地方，都会隐藏.dropdown-menu元素，除了点击它的子元素。