Найти родительский элемент родителей, используя jquery

Question

У меня есть HTML следующим образом. мне нужно, когда кто-то нажимает на элемент span, я хочу найти родительский элемент родительского элемента, проверьте некоторые условия. я использовал пред() метод, но это дает мне только вблизи родителя (parent2 здесь)

<div class="container"> 
    <div class="contain"> 
     <div id="parent1"> 
      <div class="parent2"> 
       <span> Click here</span> 
      </div> 
     </div> 
    </div> 
</div> 

вар currentComponent = $ (event.target) .prev(); // здесь я получаю parent2

Как я могу найти родителей родительский элемент (в данном случае parent2). я не очень хорошо знаком с jquery, поэтому любая помощь будет оценена по достоинству.

Answer 1

Что вам нужно

var currentComponent = $(event.target).parent().parent() 

Чтобы сделать это в одном вызове, вы можете использовать

var currentComponent = $(event.target).closest(".parent1") 

Answer 2

Вы можете попробовать .closest.

Из документов:

в .closest() метод поисков с помощью этих элементов и их предков в дереве DOM и создает новый объект JQuery из согласующих элементов. (...) получите первый элемент, соответствующий селектору, путем тестирования самого элемента и.

Она проходит вверх через элемент предков в DOM и возвращает первый один, который соответствует selector вы передается в качестве аргумента. Таким образом, в вашем примере, вы можете сделать что-то подобное:

$("span").on("click", function(e) { 
    var myParent = $(this).closest(".parent2"); 
    var parentOfMyParent = $(this).closest(".parent1"); 
    var contain = $(this).closest(".contain"); 
    var containerAbove = $(this).closest(".container"); 
}); 

Answer 3

Fiddle:

https://jsfiddle.net/c624re4o/

Код:

var grandParent = $(this).parent().parent(); 

Полный рабочий код

$(document).ready(function() { 
    $("span").click(function() { 
    var grandParent = $(this).parent().parent(); 
    alert(grandParent.attr('id')); // Just for Testing 
    }); 
}); 

$(document).ready(function() { 
 
    $("span").click(function() { 
 
    var grandParent = $(this).parent().parent(); 
 
    alert(grandParent.attr('id')); // Just for Testing 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="contain"> 
 
     <div id="parent1"> 
 
      <div class="parent2"> 
 
       <span> Click here</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>