根据下一个元素的类显示/隐藏一个元素

Question

这是一个问题，对于经验丰富的javascript用户来说似乎很容易，但我自己无法解决。

我想添加一个JavaScript代码，以在下一个html元素具有特定类的情况下显示或隐藏元素（h1）。 这里没有父母/孩子，只有下一个元素。 请注意，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> 

引用

• .prev()
• .addBack()

Answer 2

使用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选项 。

Answer 3

请在下面的片段中找到

 $( "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 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>