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

如果您感兴趣的是紧接着的元素，请使用happytime harry's solution使用.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 3

如果这两个元素位于同一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 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");
})

jQuery访问当前父级的子级

6 个答案: