JQuery выбор родственного узла текущего узла

Question

Как выбрать родственный узел текущего узла? Вот фрагмент:

<div id="main">
    <a class="test" href="test.html">Hello</a>
    <div>Some text</div>
</div>

//script
$(".test").click(function() { $("this:parent > div").toggle(); });
or
$(".test").click(function() { $("this ~ div").toggle(); });

Ни одна из этих работ. Я знаю, что могу получить доступ к текущему объекту, используя $ (this), но в этом случае я не знаю, как.

Answer 1

Вот несколько вариантов:

$(".test").click(function() { 
    $(this).next('div').toggle(); 
});

$(".test").click(function() { 
    $(this).siblings('div').toggle(); 
});

$(".test").click(function() { 
    $(this).closest('div#main').find('div').toggle(); 
});

Все зависит от того, что еще есть в вашей HTML-разметке, какую вы хотите выбрать.

Answer 2

Обязательно не ставьте this в кавычках.

$(".test").click(function() { 
    $(this).next().toggle(); 
});

В jQuery есть много замечательных функций для обхода.

Документы: http://api.jquery.com/category/traversing/

Answer 3

Вы можете изменить свой селектор:

$(".test").click(function() { $("~ div", this).toggle(); });

Answer 4

Вы пытаетесь переключить #main div? Если это так, не даст ли .parent() родительский div?

http://api.jquery.com/parent/

Я бы подумал, что вам придется использовать что-то вроде:

$(".test").click(function() { $(this).parent("div").toggle(); });

Answer 5

Использование .siblings()

http://api.jquery.com/siblings/