Есть ли такая вещь, как соседний селектор в 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 не смежен с 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');