使用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

回答

相關問題