JQuery - 查找最近的父元素并具有类名

Question

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

$(".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 类，因为这是为了实现功能。 :-)

- Sherin Jose

---

@Satpal 没有必要，就像之前说的那样closest()函数会包含元素本身。 - A. Wolff

我正在使用以下代码： $(e.target).parents('.select2-container--open').prev().attr('id') - John

Answer 1

获取特定类的第一个父级元素：

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

- A. Wolff

---

谢谢你的回答，非常好！:) - Sherin Jose

Answer 2

然后开始在parent()上使用closest()函数。

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

- Amit Joki

---

确实相当聪明 ;) - A. Wolff

@SherinJose 非常高兴能有所帮助 :) - Amit Joki

Answer 3

你需要使用.parents()而不是.closest():

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

• .closest() 方法查找最近的匹配祖先元素，包括当前元素本身。

• .parents() 方法查找所有的祖先元素。

- Milind Anantwar

---

缺点是如果有一个以上的父元素具有selectable类。 - A. Wolff

除非OP分享DOM，否则很难说。 - Milind Anantwar

感谢您的回答... :) - Sherin Jose

Answer 4

您可以按照以下方式使用parents -

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

- Bhushan Kawadkar

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>

- jyrkim