Question

这是我的代码：

<p>
    <div>
        <div><span>Hello</span></div>
        <span>Hello Again</span>
    </div>
    <div>
        <span>And Hello Again</span>
    </div>
</p>
<b>Click Hellos to toggle their parents.</b>
<script>
    function showParents() {
        $("div").css("border-color", "white");
        var len = $("span.selected")
        .parents("div")
        .css("border", "2px red solid")
        .length;
        $("b").text("Unique div parents: " + len);
    }
    $("*").click(function () {
        $("b").text($(this).parents().length);
    });
</script>

问题是当我点击一个跨度时，它显示0而不是3！

我认为问题是*

现在问题是，当我不知道元素的类型时，如何获得父计数？

Answer 1

问题是事件传播（冒泡）。 click事件从被点击的元素传播到文档的根目录，触发与这些祖先元素关联的每个点击处理程序，因此当触发html元素的点击处理程序时，不再有父项，所以你得到0结果。

演示：Fiddle - 看一下控制台

相反，您只能将单击处理程序绑定到文档对象，然后使用事件的target属性来查找触发单击并找到其父项的元素

$(document).click(function (e) {
    $("b").text($(e.target).parents().length);
});

演示：Fiddle

$（*）。单击事件单击它及其所有父项。

1 个答案: