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

​

在这里检查这个小提琴：Fiddle

您可以使用.parents('div.emoticons-row')方法在某个div的所有父级中查找特定的父级。

Answer 2

向该子元素添加一个click处理程序，并以其父元素为目标：

$( ".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分配给一个“目标”变量，你可以用它做任何你需要的事情。本例中的Target变量是对父div的引用。如果单击任何子项，它将在单击时隐藏父项及其子项。

Answer 3

正如Casey所提到的，您可以使用jQuery的closest方法来完成此操作：

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