Question

我的HTML如下。我需要的是当有人点击span元素我想找到它的父元素元素检查一些条件。我使用了prev（）方法，但它只给了我近亲（ parent2 here ）

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

var currentComponent = $（event.target）.prev（）; // 这里我得到parent2

如何找到父元素元素（在本例中为 parent2 ）。我对jquery不太熟悉所以任何帮助都会受到赞赏。

Answer 1

您可以尝试.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 2

您需要的是

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

要在一次通话中完成，您可以使用

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

Answer 3

小提琴：

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
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你可以使用.closest（）或.parents（）函数和选择器，如.parents（'＃elementid'）

使用jquery查找父元素元素

4 个答案: