Question

我正在努力使用jQuery的最近（）选择器。

I've made a jsfiddle of what I think should work ......但显然没有。为什么不呢？

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相反，它看起来 down DOM树。要选择兄弟姐妹，您可以使用siblings方法。

Answer 2

最近搜索元素的 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 3

最近的查找DOM，如果起点不在你想要的那个内，它就找不到它。

我修改了你的代码以显示：

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

也许你正在寻找这个：

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

alert('hi');

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

});

HTML：

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

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

这将让你以很大的灵活性上下起伏。

在这里完成：

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

Answer 4

在你的情况下使用next（）not nearest（）as nearest（）使用当前元素查找树BEGINNING：

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

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

});

Answer 5

.closest()找到与您的选择器匹配的最近的祖先。 closest()从它自己开始，然后是它的父母，或者它的父母的父母，或者等等。

你有什么兄弟姐妹。如果要查找共享同一父级的元素，或者 next ，则应使用.siblings()。

Answer 6

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

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

您可以使用以下内容：

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

使用您提供的HTML。

Answer 7

使用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'） - ＆gt; ＃D3
最近（目标，'div'） - ＆gt; ＃D3
最近（目标，'。b'） - ＆gt; ＃D2

我不明白'最近（）'还是......请澄清一下

7 个答案: