根据 DOM 中的位置动态生成 ID

Question

我需要根据 DOM 中的级别生成元素的值。例如如果我在文档级别有一个点击事件（即监听页面上的任何点击）并且呈现这样的 HTML，它需要遍历 DOM，直到您看到填充的“ID”属性。

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

当我点击“Googlie”时，它应该会生成如下内容： someid__div_span_p_a_span_strong

问题： 我确实有一些代码可以做到这一点，但它有问题。在上面，如果我有两个元素，如下所示。如何为强元素生成独特的价值？我可以在不使用 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 级别来生成此值之外，我没有其他选择吗？

Answer 1

我从Here 改编了这个答案。作者建议将 [#] 作为兄弟编号，以便您可以区分兄弟姐妹，例如someid__div_span_p_a_span_strong[0]

工作 jsFiddle Here.

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));
    });
});