javascript - Jquery 试图找到特定的父 div

Question

我有一个如下所示的列表:

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>
--------------

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>
--------------
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>

我现在想做的是在用户将鼠标悬停在 card-link 上时向 card-stacked 添加悬停效果，但唯一的问题是我不知道如何定位特定的 div。我不想只为 a 标签的父级添加悬停效果到所有 div

例如:

$('.card-link').hover(function() {
  $(this).$('.card-stackedl').addClass('hover');
}, function() {
  $(this).$('.card-stacked').removeClass('hover');
});

Answer 1

您可以使用 jQuery 方法 closest() 或 parent() :

$(this).closest('.card-stacked').addClass('hover');
//OR
$(this).parents('.card-stacked').addClass('hover');

希望这对您有所帮助。

$('.card-link').hover(function() {
  $(this).closest('.card-stacked').addClass('hover');
}, function() {
  $(this).closest('.card-stacked').removeClass('hover');
});

.hover{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------