Показать/скрыть элемент в зависимости от класса следующего элемента

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>