使用jQuery closest() 方法找到具有已知兄弟元素的最近元素

Question

我将尝试使用jQuery的closest命令，根据元素是否具有特定兄弟元素来查找特定元素。我一直在尝试不同的选择器，但还没有找到符合我的要求的。

例如，如果结构如下所示：

<div>
    <table>
        <tr>
            <td>
                  <span a>cell 1</span>
                  <span>cell 2</span>
            </td>
            <td siblingmatch="true">
                  <span b>cell 1</span>
                  <span>cell 2</span>
            </td>
        </tr>
    </table>

    <span siblingmatch="true">test 1</span>
</div>

如果我从标记为a的span开始运行，我希望它返回其父td，因为它有一个被标记为siblingmatch属性的兄弟。然而，如果我从标记为b的span开始运行相同的命令，我希望它返回table标签，因为这是它找到的第一个具有被标记为siblingmatch属性的兄弟的父元素。

- bbeaudet

---

你有实际的问题吗？ - Brad M

展示一下你一直在玩耍的jQuery代码。这将提供更多可操作性。 - gotohales

我认为很明显<span a>（和b）只是示例，用于指示代码后面的文本。 - user1467267

Answer 1

你可以使用parents和filter方法。

$('span').click(function(){
    var matched = $(this).parents().filter(function(){
         return $(this).siblings('[siblingmatch]').length;
    }).first();
});

http://jsfiddle.net/WW5qL/

请注意，siblingmatch不是一个有效的属性，您可以使用HTML5的data-*属性代替。

- Ram

---

是的，siblingmatch不是实际的属性名称，只是这个示例中的一个东西。我运行了你的示例，看起来确实返回了我想要的结果。我注意到你在代码中没有使用closest()函数，而是使用了parents过滤器。使用其中一个有什么原因，我能否使用closest()做同样的事情？ - bbeaudet

回复自己的评论：closest() 不支持函数，所以需要使用选择器，这就是我遇到困难的地方。parents().filter() 允许使用函数，因此提供了更多的灵活性。 - bbeaudet

@bbeaudet closest 只返回与选择器指定的匹配父元素，它不是一个有用的方法在这里使用，而 parents 返回所选元素的所有父元素（大多数情况下我不使用此函数），允许对它们进行过滤。请注意，这两个函数都不接受 function，使用 filter 是 jQuery 提供的链式调用功能。 - Ram