Question

说我有以下一组代码？

<body>
    <div>
        <div>
            <div><span>Text that I want to capture</span></div>
        </div>
    </div>
</body>

如果用户单击span元素，我想捕获元素中的文本，然后捕获元素的层次结构。目标是回来并将其与之后的捕获文本进行比较。

是否有图书馆可以帮助我实现这一目标？如果没有，你能指出一些样本JS代码吗？我一直试图弄明白，但似乎无法解决。

Answer 1

您可以使用<html>从点击的元素中获取所有父元素的数组，直到根（$([clicked element]).parents()）。见JQuery documentation

尝试通过分叉jsFiddle

来玩它

Answer 2

我认为你不需要图书馆。您可以将点击的元素存储在某个数组中，然后只需将它们parentNode - 设为层次结构：

element.parentNode.tagName

实施例

document.write('<body><div><div><div><span>Text that I want to capture</span></div></div></div></body>');
document.querySelector('span').addEventListener('click', function (e) {
    var hierarchy = [];
    var parent = e.currentTarget.parentNode;
    while (parent) {
        parent.tagName && hierarchy.push(parent.tagName);
        parent = parent.parentNode
    }
    console.log(hierarchy.reverse()); // ["HTML", "BODY", "DIV", "DIV", "DIV"]
});

Javascript - 捕获层次结构

2 个答案:

实施例