<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-parents和closest区别</title>
<style type="text/css">
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
</head>
<body>
<ul>
<li class="parents"><b>点我!</b></li>
<li class="closest">closet方法<b>Click me!</b></li>
</ul>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
</html>
1、当鼠标点击“You can also”时，颜色出现变化。这是因为closest是从当前元素开始向上遍历的。而不同于parents()方法，是从当前元素的父元素开始向上遍历。
2、当点击Click me!时，颜色也会变化。这同样经过上面步骤，从当前元素向上匹配，只不过<b>不符合条件，再往上时遇见了<li>。