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

Question

我有一个 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 有任何具有该特定唯一名称的输入子项，我需要先隐藏 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>