使用jquery隐藏div无父div

-3

当我点击按钮将隐藏所有<div.main>（每个6将同时隐藏）。使用jquery隐藏div无父div

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/

如何到达那里？

来源

2013-06-28 hell boy

你有没有尝试过任何jQuery？ – kingdamian42

得到的地方，在这里 - > http://jsfiddle.net/XGkAt/2/。 .... – adeneo

你可以这样做：

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

很可能需要添加一个ID或一类你的按钮。现在，这将触发一个button点击。

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

来源

2013-06-28 14:25:38 tymeJV

但是，这会将监听器应用于页面上的任何**按钮，这意味着如果单击按钮，则div将被隐藏。严格来说，这个答案是正确的，但不是很实际。将一个id放在按钮（和目标div上），然后使用'$（“＃myButtonId”）' - 显式永远是一个好方法。 –

在这种情况下，您可以用'$（“。container button”）' – Sumurai8

或者那个选择它。感谢您的编辑:) –

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

也许可以正常工作。

来源

2013-06-28 14:25:46 Virus721

6在问题中提到。如果你想删除它们6的时间，下面应该做的，你以后在做什么（在公认粗暴的方式）：

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

你显然需要jQuery的，这是不包含在您的原来的jsFiddle。

来源

2013-06-28 14:34:48

使用jquery隐藏div无父div

回答

相关问题