jquery - 从子元素中获取具有特定类的父元素

Question

我使用 jquery droppable。

当我放下一个元素时，我会得到被放下元素下面的元素:

var elementBeneathDroppedElement = document.elementFromPoint(event.clientX, event.clientY);

但是 elementBeneathDroppedElement 只是具有多个 div 的整个 div 的一个片段。这实际上取决于用户在哪里放置他的元素以及我作为下面放置的元素返回什么元素。

那是我放置其他元素的容器上典型元素的结构:

<div class="refOptionItem" >

    <div class="refOptionItemContent text-center text-uppercase" style="color: @Model.Item1.CssColor">
        <div>
            <img src="@(Model.Item1.IconName)" alt="@Model.Item1.IconName" />
        </div>
        <div>@Model.Item1.Name</div>
    </div>
</div>

我得到的是图像标签，但我想要的是带有“refOptionItem”类的顶级 div。

我试过这个:

var topParentDiv = $('.refOptionItem', elementBeneathDroppedElement );
 // restrict to context is not correct I guess

如何从我拥有的 elementBeneathDroppedElement 开始搜索具有特定类的父对象。

Answer 1

使用.closest()

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

代码

var topParentDiv = $(elementBeneathDroppedElement).closest('.refOptionItem');