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父的兄弟，所以在选择.parent()后使用.siblings() 得到锚：

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

顺便说一下，

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

将input直接嵌套在form中是无效的HTML。 jQuery仍然会使用它，但验证器会抱怨（如果你关心那种事情）。

Answer 2

另一种方法，使用.closest并使用.prev遍历锚点：

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

在jquery中是否存在相邻选择器这样的东西？

2 个答案: