0

我尝试获取从一个元素到另一个元素的路径（最短路径）。我永远不会知道将在 DOM 中单击哪些元素。

我可以得到每个元素在 DOM 中的路径，就像在这个问题中回答的那样：“ Get unique selector of element in Jquery ”。但是如何从元素 a 导航到 b 而无需将 DOM 返回到开始（ < html > ）并从那里导航到元素 b 呢？

查看http://jsfiddle.net/VBVSE/。我得到了一个用于元素 A 的选择器和一个用于 B 的选择器。两者都有“html>body>div>div>”的共同点。所以我现在只想要一个选择器，它可以让我以最短的方式从 A 到 B。

HTML： 

<div>
    <div>
    <div>
        <div id="eA">ElementA</div>
    </div>
    <div>
        <div>SomeOtherElement</div>
    </div>
    <div>
        <div>
            <div>
                <div>SomeOtherElement</div>
                <div id="eB">ElementB</div>
            </div>
        </div>
    </div>
</div>
</div>

<span style="font-weight:bold;">ElementAPath:</span><div id="eAp"></div>
<span style="font-weight:bold;">ElementAPath:</span><div id="eBp"></div>

jQuery（来自上面问题链接的答案）：

jQuery.fn.extend({
getPath: function () {
    var path, node = this;
    while (node.length) {
        var realNode = node[0], name = realNode.localName;
        if (!name) break;
        name = name.toLowerCase();

        var parent = node.parent();

        var sameTagSiblings = parent.children(name);
        if (sameTagSiblings.length > 1) { 
            allSiblings = parent.children();
            var index = allSiblings.index(realNode) + 1;
            if (index > 1) {
                name += ':nth-child(' + index + ')';
            }
        }

        path = name + (path ? '>' + path : '');
        node = parent;
    }

    return path;
}
});
jQuery('#eAp').text(jQuery('#eA').getPath());
jQuery('#eBp').text(jQuery('#eB').getPath());
4

0 回答 0