Question

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

如果下一个html元素具有特定的类，我想添加一个显示或隐藏元素（h1）的javascript代码。这里没有父/子，只有下一个元素。请注意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()获取前一个兄弟，然后显示/隐藏它们。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Refences

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 option。

Answer 3

请在下面找到代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

根据下一个元素的类

4 个答案: