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

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

1 个答案: