使用jquery查找父母父元素答案

【问题标题】：Find the parents parent element using jquery使用jquery查找父母父元素
【发布时间】：2018-05-15 16:21:56
【问题描述】：

我的 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 不是很熟悉，所以任何帮助将不胜感激。

【问题讨论】：

阅读 .parents() 和 .parentsUntil()。在您的情况下，预期的父元素是什么？
试试这个：$(event.target).parents('#parent1') 或 $(event.target).parent().parent()
可能复制到stackoverflow.com/questions/2369913/…
$(event.target).parent().parent() 会给出结果。
如果元素正在修改它们的祖先、后代或兄弟姐妹，您的应用程序将很快变成意大利面条。阅读一日数据流和幂等视图函数

标签： javascript jquery html angularjs

【解决方案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");
});

【讨论】：

【解决方案2】：

你需要的是

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

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

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

【讨论】：

【解决方案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
  });
});

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

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

【讨论】：

【解决方案4】：

您可以将 .closest() 或 .parents() 函数与选择器一起使用，例如 .parents('#elementid')

【讨论】：