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> 

什麼我想現在做的是一個懸停效果添加到卡疊一旦用戶懸停通過卡鏈接但唯一的問題是，我不知道如何針對特定的div。我不想懸停效果添加到所有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> 
 
--------------

Answer 2

我覺得這個文件應該給你這裏https://api.jquery.com/category/selectors/

Answer 3

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

手試試這個。

Answer 4

您必須使用.closest()方法來獲取樹中的特定父代。您也可以使用.toggleClass()像：

$('.card-link').hover(function(e) { 
 
    $(this).closest('.card-stacked').toggleClass('hover', e.type === 'mouseenter'); 
 
});

.hover { 
 
    background: 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> 
 
--------------