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

Question

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

如果下一个 html 元素具有特定类，我想添加一个显示或隐藏元素 (h1) 的 javascript 代码。这里没有 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() 获取紧靠在前的同级，然后显示/隐藏它们。

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