Jquery div选择

Question

我想使用以下代码显示/隐藏div。但是当我实施它对我不起作用。请帮助我这方面。谢谢。

http://jsfiddle.net/fysalyaqoob/6fornysr/1/

$('button').click(function() {
    $(this).siblings('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

它无法使用HTML代码：

<div class="1">
    <div class="2">
        <div class="wedding post">WEDDING DIL</div>
    </div>
</div>

Answer 1

在您使用的第二行脚本

上

$(this).siblings('.post').hide()

这意味着，当点击button时，您只隐藏具有.post类的兄弟。由于.wedding.post类的第一个div不是button的兄弟，因此在点击时它不会隐藏。

您需要删除第一个.wedding.post div的父div才能完美运行。

示例 -

<div class="wedding post">WEDDING DIL</div>
<div class="portrait post">PORTRAIT 1</div>
<div class="personal post">PERSONAL 1</div>
<div class="wedding post">WEDDING 2</div>
<div class="wedding post">WEDDING 3</div>
<div class="portrait post">PORTRAIT 2</div>

DEMO 此处

Answer 2

siblings选择共享同一父节点的所有直接子节点。如果要查找嵌套节点，可以使用$(this).parent().find('.post').hide()。

Demo

甚至$('.post')如果想要查找文档中的所有帖子。