在 CSS 或 jquery 中选择直接兄弟？

Posted 2023-05-09

【中文标题】在 CSS 或 jquery 中选择直接兄弟？

【英文标题】：Select immediate sibling in CSS or jquery?

【发布时间】：2017-05-20 19:07:17

【问题描述】：

我在兜圈子，但无法为此找到精确的逻辑。我有以下代码：

<form>
 <table></table>
 <div class="1"> </div>
 <div class="2"> </div>
 <div class="3"> </div>
</form>

表格标签的依赖是通过设置来控制的，它并不总是存在的。如果存在“table”标签，我想要做的是隐藏类 1 的“div”。关于如何通过 CSS 或 Jquery 做到这一点的任何想法？

【参考方案1】：

你可以使用+来表示直接兄弟：

table + div.one 
  display: none;

<form>
  <table></table>
  <div class="one">a</div>
  <div class="two">b</div>
  <div class="three">c</div>
</form>

【讨论】：

无需复制代码块。 Stack Snippets 始终在您的帖子中显示代码。

【参考方案2】：

$('table').length > 0 ? $('.class1').hide() : $('.class1').show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <table></table>
 <div class="class1"> 1</div>
 <div class="class2"> 2</div>
 <div class="class3"> 3</div>
</form>

假设只存在一个表，使用.length 检查是否存在。 您可以使用 ID 或类来更具体地检查要检查的表。 不要使用数字开始命名类

具体表：

$('table#check').length > 0 ? $('.class1').hide() : $('.class1').show();//checks for table with id check if present then do hide or show 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table id='check'></table>
  <div class="class1">1</div>
  <div class="class2">2</div>
  <div class="class3">3</div>
  <table id='check1'></table>
</form>

【参考方案3】：

Working Fiddle

使用.siblings() 方法。

if ($('table').length > 0) 
  $("table").siblings().first().hide();