Jquery - 查找具有类名的最近父级

Question

在我的应用程序中，我想找到一个具有类名的最近的父元素，一个被点击的元素。 为此，我有以下代码与最接近的方法。 我知道它具有使用选择器获得最接近元素的功能。 但在这里我给了一个类名作为选择器;

$(".selectable").click(function(){
    var closest  = $(this).closest('.selectable'); 
});    

问题是如果当前元素及其父元素具有相同的类.selectable ，它将返回当前元素本身。 但实际上我想要它的父母。 例如，

<div class="selectable div-1">
    <div class="selectable div-2">
        <!--elements here-->
    </div>
</div>

在上面的例子中，我点击.div-2 div，它返回.div-2本身，而不是.div-1 div。 请不要让我从父母那里删除.selectable类，这是为了功能...... :-)

Answer 1

要获得特定类的第一个父级：

$(this).parents('.selectable').first();

Answer 2

然后开始使用closest()在parent()

$(".selectable").click(function(){
    var closest = $(this).parent().closest('.selectable'); 
});  

Answer 3

您需要使用.parents()而不是.closest() ：

 $(this).parents('.selectable'); 

• .closest()查看所有祖先以及原始元素，并返回第一个匹配项。

• .parents()查看所有祖先，并返回所有匹配项。

Answer 4

您可以使用以下parents -

$(".selectable").click(function(){
    var closest  = $(this).parents('.selectable'); 
});

Answer 5

还记得在你的方法中return false以避免冒泡：

 $(".selectable").click(function() { // var closest = $(this).parent().closest('.selectable'); var selectableParentExist = $(this).parents('.selectable').length; if (selectableParentExist > 0) { var closest = $(this).parents('.selectable'); alert(closest.attr("id")); } return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="parentDiv" class="selectable div-1">Parent Div <div id="selectableDiv" class="selectable div-2"> <!--elements here-->Selectable Div </div> </div>