Question

当我点击该按钮时，将隐藏所有<div.main>（每个{6}将同时隐藏。）

HTML：

<body>
    <div class="container">
        <button>Hide</button><br />
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
        <div class="main"><img src="http://fc08.deviantart.net/fs46/f/2009/230/a/4/Spongebob_10_150x150_PNG_by_somemilk.png" /></div>
    </div>
</body>

CSS：

.container {
    width: 900px;
}
.main {
    float: left;
    width: 150px;
}

http://jsfiddle.net/XGkAt/

如何到达那里？

Answer 1

你可以这样做：

$("button").click(function() {
    $(this).parent().find('div.main').hide();
});

您可能应该在按钮中添加ID或类。现在，只需点击button即可触发任何时间。

演示：http://jsfiddle.net/XGkAt/1/

Answer 2

$(your button).on('click', function() {
    $(this).parent().children('div.main').hide();
});

可能有用。

Answer 3

问题中提到了

6。如果你想一次删除六个，那么你应该做的就是你所追求的（以粗暴的方式）：

$(".container button").click(function() {
    for (var i = 0; i < 6; i++) {
        $("div.main:visible").first().hide(); 
    }
});

你显然需要jQuery，它不包含在原来的jsFiddle中。

使用没有父div的jquery隐藏div

3 个答案: