jquery - jQuery Closest - 它是如何工作的？

Question

jQuery文档状态

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

在我看来，这里的操作词是祖先。这意味着如果一个人使用

elem.closest(selector)

并且 selector 不是 elem 的祖先，不会找到任何东西。但是，在它读取的同一个文档中稍微低一点

向上移动 DOM 树，直到找到匹配的选择器

我将其解释为这意味着它将一直到 <body> 标记以获取它的人。注意，这里没有提到父母或祖先。

我写了一个快速小提琴，这似乎表明前一种说法是正确的。但是，我认为最好在这里发帖，看看是否有其他人可以证实这一点。

score 10 · Accepted Answer

像这样工作的实现.closest()（在伪代码中）：

while (node) {
  if (node matches selector) {
    return node;
  }
  node := node.parentNode
}

换句话说，它只跟随父链向上遍历。

score 5 · Accepted Answer

当它在第二个引用中说“遍历 DOM 树”时，它的意思是在您的第一个引用中“向上遍历 DOM 树中的祖先”。引用的两种陈述之间没有区别；一个是对另一个的释义，只是碰巧不太具体。

score 2 · Accepted Answer

.closest() 方法在 DOM 树中搜索这些元素及其祖先，并从匹配的元素构造一个新的 jQuery 对象。

前任：

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

这将改变 level-2 的颜色，因为它是向上移动 DOM 树时第一次遇到的颜色。

score 1 · Accepted Answer

jQuery 最接近（）选择选择器的第一个父元素（通过它的 HTML 标记），或选择器本身（如果匹配）。这就像如果你选择'p'元素（$（'p#someid'）），它会从你的'p'元素开始搜索，如果没有匹配，它会移动到它的父元素。等等

示例 HTML：

<div id='select_me'>Div
    <p id='id'>paragraph</p>
</div>

$('#id').closest('div)// 将选择div#select_me, 作为最近的父 div

然而

 <p id='select_me'>Div
    <p id='select_me_now'>paragraph</p>
</p>

$('#select_me_now').closest("p");// 会选择p#select_me_now自己

4 回答 4