JQUERY .closest() .parents()区别

来源：互联网发布：对位算法编辑：程序博客网时间：2024/06/07 01:03

<!DOCTYPE html><html><head><style>.ancestors *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head><body><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><script>$('li.item-1').parents('ul').css('background-color', 'red');</script></body><!-- In this example, $("span").closest("ul") means that we search for the first ancestor of span that is an ul element. The CLOSEST ancestor of span is li, but since we are looking for a div, jQuery skips the li element and continue the search for the next ancestor, on and on until it locates our search for ul. If we use the parents() method instead, it will return both ul ancestors. --> </html>

.closest().parents()从当前元素开始从父元素开始沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回包含零个或一个元素的 jQuery 对象返回包含零个、一个或多个元素的 jQuery 对象

0 0