當包含特定類時，在DOM中隱藏元素
[英]Hide an element in DOM when specific class included
問題描述
當html代碼中間包含特定類時，我需要從DOM中隱藏div。 請看這個例子。
<body>
<div class="first-group">
<h1>Hello world</h1>
</div>
<div class="wrapper">
<div class="second-group">
<div class="main">
<div class="small">
<span class="text-block">Hello mars</span>
</div>
</div>
</div>
</div>
</body>
我試圖用jQuery .closest()實現這一點，但是沒有運氣。
$( ".text-block" ).closest( ".first-group" ).css( "color", "red" );
有什么辦法嗎？
5 個解決方案
解決方案1
1 2018-05-31 05:35:37
if($(".second-group span").hasClass("text-block")) { $('.first-group').css('display', "none"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
解決方案2
1 2018-05-31 05:40:33
如果包裝器內.text-block的長度大於0，則只需簡單地使.first-group display: none 。
if($( ".wrapper" ).find( ".text-block" ).length > 0){ $('.first-group').css( "display", "none" ) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
如果您有多個.wrapper .first-group和.wrapper則只需循環包裝器並找到其父級和該父級的上一個元素。
$( ".wrapper" ).find( ".text-block" ).each(function() { $(this).parents('.wrapper').prev('.first-group').css( "display", "none" ); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
解決方案3
1 2018-05-31 05:44:15
您的基本問題是， closest（）尋找祖先。 .text-block不是.first-group的后代。 使用prev（）查找包含塊的上一個同級。
根據您的意見， 如果有中間兄弟姐妹，則 prevAll可以使用。我在示例中添加了一些空的 divs進行演示。我需要檢查一些附帶情況。
為了使此功能更強大，我使用了prevUntil來限制同級選擇，並結合prev來查找實際感興趣的元素。
$( ".text-block" ).closest( ".wrapper" ).prevUntil(".first-group").prev().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> </body>
注意如果您更改HTML結構，這將中斷。
解決方案4
1 2018-05-31 05:45:18
當.first-group在.wrapper div之外時，最接近的使用只會尋找其祖先。
在下面的代碼中，我們找到元素的祖先，然后使用prev（）獲取類為.first-group的前一個元素
$(this).closest("div.wrapper").prev(".first-group").css('display', 'none');
看看是否可行。
解決方案5
1 2018-05-31 06:07:12
您可以嘗試使用parents()和siblings() ，如下所示：
$(".text-block").parents('.wrapper').siblings('.first-group').css( "color", "red" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
jQuery沒有添加額外的插件：當具有特定類的元素被添加到DOM時觸發事件
[英]jQuery without adding additional plugins: trigger event when an element with a specific class is added to the DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.