根據下一個元素的類別顯示/隱藏元素

Question

這裏有一個問題，對於javascript用戶可能看起來很容易，但我自己無法解決。

我想添加一個javascript代碼來顯示或隱藏元素（h1），如果下一個html元素有特定的類。這裏沒有父母/孩子，只有下一個元素。 請注意Jquery已經加載。

這裏的例子：

<h1>This must be displayed because next element is div class="show"</h1> 
<div class="show"> 
    <p>Show header above</p> 
</div> 

<h1>This should not be displayed because next element is NOT div class="show"</h1> 
<div class="dontshow"> 
    <p>Don't show header above</p> 
</div> 

在此先感謝您的幫助。 方面

Answer 1

您可以使用.prev()立即在兄弟姐妹之前，然後顯示/隱藏它們。

$('div.show').prev('h1').addBack().show(); 
 
$('div.dontshow').prev('h1').addBack().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>This must be displayed because next element is div class="show"</h1> 
 
<div class="show"> 
 
    <p>Show header above</p> 
 
</div> 
 

 
<h1>This should not be displayed because next element is NOT div class="show"</h1> 
 
<div class="dontshow"> 
 
    <p>Don't show header above</p> 
 
</div>

Refences

• .prev()
• .addBack()

Answer 2

請在下面找到片斷

$("h1").each(function(index) { 
 
    if($(this).next().hasClass("show")) 
 
    { 
 
    $(this).show(); 
 
    } 
 
    else 
 
    { 
 
    $(this).hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>This must be displayed because next element is div class="show"</h1> 
 
<div class="show"> 
 
    <p>Show header above</p> 
 
</div> 
 

 
<h1>This should not be displayed because next element is NOT div class="show"</h1> 
 
<div class="Hide"> 
 
    <p>Don't show header above</p> 
 
</div>

Answer 3

使用previousElementSibling得到的前一個同級元素。

document.querySelector('.dontshow').previousElementSibling.style.display = 'none'; 
 

 
document.querySelector('.show').previousElementSibling.style.display = 'block';

.dontshow { 
 
    display: none; 
 
}

<h1>This must be displayed because next element is div class="show"</h1> 
 
<div class="show"> 
 
    <p>Show header above</p> 
 
</div> 
 

 
<h1>This should not be displayed because next element is NOT div class="show"</h1> 
 
<div class="dontshow"> 
 
    <p>Don't show header above</p> 
 
</div>

對於較舊的瀏覽器檢查polyfill option。

Answer 4

正如順便說一句，爲什麼不乾脆把H1標籤的div？：

<div class="show"> 
    <h1>This must be displayed</h1> 
    <p>Show header above</p> 
</div> 

<div class="dontshow"> 
    <h1>Don't show</h1> 
    <p>Don't show header above</p> 
</div>