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']作为输入，如何立即删除整个第一个 div，parent().hide()仅删除第一个父级。

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

Answer 1

使用$x=10; $x+=++$x; echo $x;选择器，选择其中包含一个或多个元素的所有元素，它们与指定的选择器匹配。：

:has()

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

Answer 2

首先选择所有输入，然后隐藏它的父母。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: