0

次のコード セットがあるとしますか?

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

ユーザーがスパン要素をクリックすると、要素内のテキストをキャプチャしてから、要素の階層をキャプチャしたいと考えています。目標は、後で戻ってきて、キャプチャしたテキストと比較することです。

これを達成するのに役立つライブラリはありますか? そうでない場合は、これを行うサンプル JS コードを教えてもらえますか? 私は一日中それを理解しようとしてきましたが、そうではないようです。

4

2 に答える 2

2

<html>を使用して、クリックした要素からルート ( ) までのすべての親要素の配列を取得できます$([clicked element]).parents()。JQuery のドキュメントを参照してください

このjsFiddleをフォークして遊んでみてください

于 2013-09-08T06:55:59.227 に答える
1

そのためにライブラリは必要ないと思います。クリックした要素をいくつかの配列に保存してから、それら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"]
});
于 2013-09-08T06:49:59.397 に答える