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

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

Answer 2

Если два элемента находятся на одном уровне 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 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");
})