Question

如何在 jquery 中隐藏父子层次结构？

2017-10-12

292

jquery html

我有 div 层次结构，并且有一个具有唯一名称属性的输入框。

$(document).ready(function(){
  $(".first > input[name='inp']").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="first">
  First
  <div class="second">
  Second
    <label for="inp">Label Input</label>
    <input type="text" name="inp" />
  </div>
</div>

如果 div 具有任何具有该特定唯一名称的输入子项，我需要隐藏 first div。

我使用此选择器 input[name='inp'] 进行输入，现在我该如何删除整个 first div， parent().hide() 仅删除第一个父级。

注意： 有多个具有相同类名的 div，因此我不能使用类选择器。

Answer 1

使用 :has() 选择器，选择所有包含一个或多个与指定选择器匹配的元素的元素。：

$(document).ready(function(){
  $(".first:has(input[name='inp'])").hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="first">
  First
  <div class="second">
  Second
    <label for="inp">Label Input</label>
    <input type="text" name="inp" />
  </div>
</div>

Answer 2

首先选择所有输入，然后隐藏其父级。

$(document).ready(function() {
  $("input[name='inp']").closest('.first').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
  First 1
  <div class="second">
  Second
    <label for="inp">Label Input</label>
    <input type="text" name="inp" />
  </div>
</div>
<div class="first">
  First 2
  <div class="second">
  Second
    <label for="inp">Label Input</label>
    <input type="text" name="inp" />
  </div>
</div>
<div class="first">
  First 3
  <div class="second">
  Second
    <label for="inp">Label Input</label>
    <input type="text" name="inp3" />
  </div>
</div>

您的 parent().hide() 不起作用，因为它选择了 .second ，而不是 .first 。还有 .parents() 来选择所有父级，因此应该是 .parents().eq(1).hide()