Display/hide 一个元素取决于下一个元素的 class

Question

这个问题对于有经验的 javascript 用户来说可能看起来很容易，但我自己无法解决。

我想添加一个 javascript 代码，用于在下一个 html 元素具有特定 class 时显示或隐藏元素 (h1)。这里没有 parent/child，只有下一个元素。请注意 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() 获取紧邻的兄弟姐妹，然后 show/hide 他们。

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

参考文献

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>

Display/hide 一个元素取决于下一个元素的 class

Display/hide an element depending on next element's class

javascript

css

jquery

getelementsbyclassname

display