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课程，它的功能是......： - ）

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以避免冒泡：

＆＃13;

$(".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;
});

＆＃13;

<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>

＆＃13;

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

5 个答案: