我不明白“closest()”仍然...请澄清

Question

我正在与 jQuery 的 closest() 选择器作斗争。

我制作了一个我认为应该有效的jsfiddle...但显然不是。为什么不呢？

HTML

<div class="button">button</div>
<div class="return_window"></div>

和极其复杂的 JS

$('.button').click(function(){

    $(this).closest('.return_window').html('hi');

});

我对这个虚幻的 .closest() 选择器有什么不明白的地方？那些 div 看起来很接近我。我已经阅读了文档，但我不知道它是什么。Resig 的文档或编写它的人对我来说似乎处于不同的维度。

任何指示都非常感激。

Answer 1

closest 用于爬上 DOM 树，而不是侧视同级元素。简单来说，它将查看父元素及其父元素，依此类推，直到到达它要查找的内容（或 DOM 树的顶部）。

例如：

<div class="grandparent">
    <div class="parent">
        <div id="child"></div>
        <div class="grandparent"></div>
    </div>
</div>

以下 jQuery 将选择外部 div，而不是同级 div：

$(".child").closest(".grandparent");

closest 与 find，它向下查找 DOM 树。要选择同级，您可以使用 siblings 方法。

Answer 2

最接近的查找 DOM，如果起始点不在您要查找的范围内，则不会找到它。

我修改了您的代码以显示以下内容：

http://jsfiddle.net/uRgEw/2/

也许您正在寻找这个：

$('.button').click(function(){

alert('hi');

$(this).closest('.container').find('.return_window').html('hi');

});

使用 HTML of：

<div class="container">
    <div class="return_window">

    </div>
    <div class="button">button</div>
</div>

这将使您能够以良好的灵活性上下移动。

如下所示：

http://jsfiddle.net/uRgEw/5/

Answer 3

<div class="return_window">
    <div class="button">button</div>
</div>

在您的示例中，上面的 HTML 是可行的。它找到最近的祖先。

您可以使用类似的内容：

$(this).next('.return_window').html('hi')

使用您提供的 HTML。

Answer 4

最接近的元素使用 parentNode 从当前选定的元素走到根，并找到与给定选择器匹配的第一个元素：

function closest(element, selector) {
    while (element != null) {
        if (matchesSelector(element, selector)) {
            return true;
        }
        element = element.parentNode;
    }
    return null;
}

例如，我们有这样的 HTML：

<div id="d1" class="a">
  <div id="d2" class="b">
    <div id="d3" class="a">
      <span id="target"></span>
    </div>
  </div>
</div>

并且我们需要一些最接近的选择器，输出将是：

• 最接近（目标，'.a'）-> #d3
• 最接近（目标，'div'）-> #d3
• 最接近（目标，'.b'）-> #d2

Answer 5

最近搜索元素的 PARENTS - 不是元素附近的兄弟元素。

之所以称为最接近，是因为它找到特定类型（选择器）与该元素最接近的父元素。 .parents() 获取所有父级。

我一直用它。

就像：

<form>
  <div>
    <p>
      <input type="button" onClick="alert($(this).closest('form'));">
    </p>
  </div>
</form>

从内心深处，我可以快速找到父表单，忽略所有中间元素。

如果您想要最近的兄弟姐妹，请执行以下操作：

$(this).prevAll('.return_window').last();
$(this).nextAll('.return_window').first();

这将为您提供上面和下面两个最近的兄弟姐妹，您需要找出哪个更接近。

Answer 6

.closest() 查找与您的选择器匹配的最接近的祖先。 closest() 从自身开始，然后是其父级，或其父级的父级，等等。

你所拥有的就是兄弟姐妹。如果您想查找共享相同父级或彼此相邻的元素，则应该使用 .siblings()。

Answer 7

在您的情况下，使用 next() 而不是 Closest() 作为 Closest() 查找以当前元素开头的树：

$('.button').click(function(){

    $(this).next('.return_window').html('hi');

});