0

DOMのレベルに基づいて要素の値を生成する必要があります。たとえば、ドキュメントレベルでクリックイベントがあり（つまり、ページのクリックをリッスンしている）、このようにレンダリングされたHTMLがある場合、「ID」属性が入力されるまでDOMをトラバースする必要があります。

<div id="someid">
<div>
    <span>
        <p>
            <a href="javascript:void(0);">
                <span>
                    <strong>Googlie</strong> 
                </span>
            </a>                
        </p>
    </span>
</div>

「グーグリー」をクリックすると、次のようなものが生成されます：someid__div_span_p_a_span_strong

問題：これを行うためのコードはありますが、問題があります。上記で、以下に示すように、次々に2つの要素がある場合はどうなりますか。強い要素に固有の値を生成するにはどうすればよいですか？childNodesの場所を使用せずに何かを取得できますか？誰かが要素間の空白を変更すると、childNodesの値が変更されます。

...<span>
<strong>Googlie</strong> <br/> <strong>Bingie</strong>

..。

    document.onclick = function(obj) {
    var node = obj.target;
    var res = [];
    var etA = "";
    res[0] = false;
    while (!res[0]) {
        res = GetIdFor(node);
        if (!res[0]) {
            var end = node.parentNode.childNodes.length;
            for (var i = 0; i < end; i++) {
                var j = node.parentNode.childNodes[i];
                if (j.nodeType === 1 && j === node) {
                    break;
                }
            }
            etA = "_" + node.tagName + etA;
            node = node.parentNode;
        }
        else {
            etA = res[1] + "_" + etA;
        }
    }
    alert(etA);
};
function GetIdFor(elem) {
    var res = [];
    res[0] = false;
    var d = elem.getAttribute("ID");
    if (d !== "undefined" && d !== null) {
        res[0] = true;
        res[1] = d;
    }
    return res;
}

今、私はjQueryがここで役立つことを知っていますが、それは重要ではありません。:)考え？この値を生成するためにchildNodesレベルを使用する以外に選択肢はありませんか？

4

1 に答える 1

0

Hereからこの回答を採用しました。著者は、[#] を兄弟番号として付けて、兄弟を区別できるようにすることを提案しています (例: someid__div_span_p_a_span_strong[0])。

ここでjsFiddle を使用します。

function elementPath(element)
{
    return $(element).parents().andSelf().map(function() {
        var $this = $(this);
        var tagName = this.nodeName;
        if ($this.siblings(tagName).length > 0) {
            tagName += "[" + $this.prevAll(tagName).length + "]";
        }
        return tagName;
    }).get().join(".").toLowerCase();
}

$(document).ready(function() {
    $(document).click(function(e) {
        e.stopPropagation();
        window.alert(elementPath(e.target));
    });
});
于 2012-09-19T18:36:55.933 に答える