如何在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 第一如果有任何輸入孩子與該特定唯一的名稱。

我用這個選擇器input[name='inp']進行輸入，我如何刪除整個第一個 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()