jQuery中是否有相邻选择器？

Question

我正在尝试使用正确的选择器来编写这段代码，但似乎无法使其正常工作。

<ul id="message-list">
    <li class="clearfix message success unread">
        <a href="/messages/mark_read/61/" class="message-close"></a>
        <h4>
            <strong>
                Getting Real: The Smarter, Faster, Easier Way To Build A Successful Web Application
            </strong>
            has been added to your profile.
        </h4>
        <form action="/profile/tweet/NIZNQwAACAAJ/" method="post">
            <div style="display:none">
                <input type="hidden" value="3b723be17da67c5bc54b27a98a660d53" name="csrfmiddlewaretoken">
            </div>
            <input type="submit" class="button tweet-button" value="Tweet This Book">
        </form>
    </li>
</ul>

$('.tweet-button').click(function (e) {
    var $list_item = $(this).parent('ul li.message'); < ----- ? ? ?
    var $anchor = $(this).parent('a'); // ?? <------
});

我正在尝试获取具有类名为“message”的最上层列表项的选择器和紧邻表单的锚标签。 有什么想法吗？

- ashchristopher

Answer 1

由于 li.message 不是您的按钮的直接祖先，因此使用.parents()在DOM树中向上搜索，直到达到 li.message:

var $list_item = $(this).parents('li.message');

由于锚点是您输入的form父级的兄弟节点，因此在选择.parent()后使用.siblings()来获取锚点：

var $anchor = $(this).parent().siblings('a');

顺便说一下，

• 尽管 a 是其兄弟元素之一，但它与 form 不相邻。

• 直接在form 中嵌套一个 input 不是有效的 HTML。虽然 jQuery 仍将与其一起使用，但验证器会抱怨（如果您关心这种事情）。

- BoltClock

Answer 2

另一种方法是使用 .closest 并通过 .prev 遍历到锚点：

var $list_item = $(this).closest('li.message');
var $anchor = $(this).closest('form').prev().prev('.message-close');

- karim79