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”类的最上面列表项的选择器以及与表单相邻的锚标记。

有什么想法吗？

Answer 1

由于 li.message 不是按钮的直接祖先，因此请使用 .parents () 搜索 DOM 树，直到到达 li.message：

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

并且由于锚点是 form 的兄弟输入的父级，使用 .siblings() 选择.parent()以获取锚点后：

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

• a与表单不相邻，尽管它是其同级元素之一。

• 直接在表单中嵌套输入不是有效的HTML。 jQuery 仍然可以使用它，但验证器会抱怨（如果你关心这类事情）。

Answer 2

另一种方法是，使用 .closest 并使用 .prev：

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