jQuery-parents和closest区别

<!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>。 

posted on 2017-03-20 16:13  vleexy  阅读(189)  评论(0编辑  收藏  举报