JQuery доступ дочерний текущий родительский

Question

Я новичок в jQuery и пытаюсь сделать следующее: получить доступ к дочернему элементу родительского элемента текущего div (или, другими словами: другому дочернему элементу родительского элемента текущего div). Мой код выглядит так (вот что я пробовал):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).parent().("div.content").slideToggle("normal"); //<- how?
    });
});
</script>

<div class="box">
<div class="head">
    Example
</div>
<div class="content">
    Content here.
</div>
</div>

Я пытаюсь сделать это таким образом, потому что тогда я мог бы просто сделать больше блоков таким же образом, не добавляя дополнительные js, чтобы он работал для каждого блока (переключатель скрытия / показа содержимого каждого блока).

Answer 1

Если два элемента находятся на одном уровне DOM, то вы можете использовать .siblings():

$(function() {
    $(".head").click(function() {
        $(this).siblings(".content").slideToggle("normal");
    });
});

Вот демо: http://jsfiddle.net/L5kqs/1/

Вашему селектору нужна была .children() или .find():

$(this).parent().children(".content").slideToggle("normal");

Также обратите внимание, что ваши селекторы будут работать быстрее, если вы опустите имена тегов. Только когда будет много узлов DOM для поиска, это улучшит производительность.

Если вы хотите узнать больше о .siblings() это было бы хорошим началом: http://api.jquery.com/siblings

Answer 2

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).next("div.content").slideToggle("normal"); //<- easy
    });
});
</script>

Answer 3

Если все, что вас интересует, это элемент сразу после этого, используйте решение Happytime Harry, которое использует .next()т.е.

$(this).next(".content").slideToggle("normal");

Если вы ищете что-то более общее, используйте одно из следующего:

// Search for elements which are direct children of parent
$(this).parent().children(".content").slideToggle("normal");  

// Search for siblings (same as above, but will not include $(this))
$(this).siblings(".content").slideToggle("normal");

// Search within all descendents of parent
$(this).parent().find(".content").slideToggle("normal");

Answer 4

Ты можешь попробовать

 $(document).ready(function() {
     $("div.head").click(function() {
         $(this).parent().find(".content").slideToggle("normal"); //<- how?
     });
 });

или использовать братьев и сестер

 $(this).siblings(".content").slideToggle("normal");

Answer 5

Ты можешь использовать .find.children чтобы получить div.content:

$(document).ready(function() {
    $("div.head").click(function() {
        $(this).parent().children("div.content").slideToggle("normal");
    });
});

Или вы можете использовать .siblings:

$(document).ready(function() {
    $("div.head").click(function() {
        $(this).siblings("div.content").slideToggle("normal");
    });
});

Answer 6

Что -то вроде этого должно быть достаточно

$(".head").bind("click", function(){
    $(this).parent().find(".content").slideToggle("normal");
})