Find distant parent in jquery

Question

I'm a little stuck on how to track down an element that's up the tree as a parent element.

$('.btn-action').hover(
  function(){
    $(this).find('.product-card').addClass('animated bounce');
  },
  function(){
    $(this).find('.product-card').removeClass('animated bounce')
  }
);

The .product-card class is not the direct parent but further up the tree. I need animate it based on the hover method on the .btn-action class. Can this be achieved with .parent() or .find() ?

Answer 1

To go up the tree you can use .closest().

$(this).closest('.product-card').addClass('animated bounce');

To go further in the tree use .find(). To stay on the same level, you can use .siblings()

Although I am not sure about the space in your classname. Try using a dash if multiple classes wasn't intended.

Answer 2

我认为，您可以使用.closest( selector )方法来获取元素的最近父级。

Answer 3

Have you tried using .parents()? @see https://api.jquery.com/parents/

To get the .product-card ancestors try:

$('.product-card').parents()