jquery - 使用 jQuery .closest() 遍历 DOM

Question

我认为很容易.closest()处理的事情结果不是（或者我可能犯了一个愚蠢的错误）。

我想要做的是从内部文本访问<label>元素：：<div>I AM HERE

<li>
    <label>I WANT TO ACCESS THIS ELEMENT</label>
    <div>...</div>
    <div>
        <input/>
        <input/>
        <input/>
        <div id="start">I AM HERE</div>
    </div>
</li>

我的第一个猜测是尝试这个：

$('#start').closest('label') 

但它不返回任何东西。

Answer 1

.closest()只寻找初始选择的祖先元素。您想要.closest()and .siblings()or的组合.children()：

//find closest parent `<li>` element and then find that element's child `<label>` element
$('#start').closest('li').children('label');

//find the closest parent `<div>` element and then find that element's sibling `<label>` element
$('#start').closest('div').siblings('label');

更新

一个非常快速的选择器将使用.prev()两次，.parent()如下所示：

$('#start').parent().prev().prev();

Answer 2

.closest仅查找所选元素的父级。尝试这个：

$("#start").closest("li").children("label");

更新

更改为.children，"> label"选择器已折旧。

Answer 3

Closest 将从当前元素开始并沿 DOM 树向上移动，但由于<label>不是当前元素的父元素，因此您需要使用 2 个查找：

 $('#start').closest('li').children('label');

这将是您最有效的遍历。

Answer 4

我知道这很旧，但这是最快的方法......

$('#start').closest('li').find('label');

find()使用本机浏览器方法，children()使用浏览器解释的 JavaScript