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