javascript - 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'); // ?? <------
});

我正在尝试获取具有类“消息”的最上面列表项的选择器和与表单相邻的 anchor 标记。

有什么想法吗？

Answer 1

因为 li.message 不是您按钮的直接祖先，所以使用 .parents()向上搜索 DOM 树，直到到达 li.message:

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

因为 anchor 是您输入的形式父级的兄弟级，所以使用.siblings() 在选择 .parent() 以获取 anchor 之后:

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

顺便说一下，

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

• 直接在 form 中嵌套 input 不是有效的 HTML。 jQuery 仍然可以使用它，但验证器会提示(如果你关心这类事情)。