使用JQuery僅選擇所選div的父級

Question

我試圖只選擇一個div，而不能選擇一個div的父級，但是沒有成功...我的代碼選擇了所選div之上的所有div，這是錯誤的，我該怎么做呢？ 我想實現一個簡單的搜索行為...

<script>**$(".emoticons-row").hide();**</script>
<div class="emoticons-row">
    <div class="emoticons-col emoticon"><img title="Smile" src="./images/smile.png" alt="Smile"></div>
    <div class="emoticons-col emoticon">:)</div>
    <div class="emoticons-col desc">Smile, Smiling</div>
    <script>**$(".desc:contains('Sorriso')").parent().show();**</script>
    <div class="emoticons-col action"><input type="button" value="copy" /></div>
</div>
<div class="emoticons-row">
    <div class="emoticons-col emoticon"><img title="Sad" src="./images/sad.png" alt="Sad"></div>
    <div class="emoticons-col emoticon">:(</div>
    <div class="emoticons-col desc">Sad</div>
    <div class="emoticons-col action"><input type="button" value="copy" /></div>
</div>

Answer 1

 $(document).ready(function() { $(".emoticons-row").hide(); $(".desc:contains('Smile')").parents("div.emoticons-row").show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="emoticons-row"> <div class="emoticons-col emoticon"> <img title="Smile" src="./images/smile.png" alt="Smile"> </div> <div class="emoticons-col emoticon">:)</div> <div class="emoticons-col desc">Smile, Smiling</div> <div class="emoticons-col action"> <input type="button" value="copy" /> </div> </div> <div class="emoticons-row"> <div class="emoticons-col emoticon"> <img title="Sad" src="./images/sad.png" alt="Sad"> </div> <div class="emoticons-col emoticon">:(</div> <div class="emoticons-col desc">Sad</div> <div class="emoticons-col action"> <input type="button" value="copy" /> </div> </div> 

在這里檢查這個小提琴： 小提琴

您可以使用.parents（'div.emoticons-row'）方法在div的所有父對象中查找特定父對象。

Answer 2

將點擊處理程序添加到子元素並定位其父元素：

$( ".emoticons-col" ).on( "click", function() {
 var target = $(this).parent(); //This is the ref to the parent of the row you clicked
 target.hide(); //hide the parent and it's children
});

單擊哪個子項都沒有關系，它將始終將父div分配給一個“目標”變量，您可以使用它進行任何操作。 在這種情況下，目標var是對父div的引用。 如果單擊任何子級，則單擊時將隱藏父級及其子級。

Answer 3

如Casey所述，您可以使用jQuery的closest方法來做到這一點：

$(".desc:contains('Smile')").closest(".emoticons-row");