Question

我正在尝试构建以下内容：假设用户选择“List Two”进行复制，如何在javascript中获取该节点的路径？选择“列表2”的节点示例：//HTML/BODY/DIV/UL/LI[1]
我的文件的index.php

<html>
    <head>
        <title>TheWeb</title>
    </head>
    <body style="background-color:#e9e9e9; color:#777;">
        <div>
            <ul id="list">
                <li>List One</li>
                <li>List Two</li>
                <li>List Three</li>
                <li id="four">List Four</li>
            </ul>
            <hr />
            <div>
                <p id="p">Just a Paragraph</p> <i>xdd</i>
                <hr />
            </div>
        </div>
    </body>
</html>

我正在使用的javascript.js是我从以后找不到的地方复制的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    function getElementPath(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("/").toUpperCase();
    }

    $(document).ready(function() {
        $("div, p, a, ul, li, table, td, tr, b, i, span, u").click(function(event) {
            event.stopPropagation();
            window.alert(getElementPath(this));
        });
    });
</script>

这也需要jQuery。这有效，但它不稳定，它有错误。此外，是否存在类似*的通用，而不是单独使用所有标签？

$("div, p, a, ul, li, table, td, tr, b, i, span, u").click()

注意：我不喜欢使用jQuery，但如果没有jQuery就很复杂jQuery很好。如果您需要我向您澄清任何事情，请告诉我。感谢。

编辑，添加更多信息：我得到的答案很惊人，但我遇到了更多障碍。假设用户同时选择“列表一”和“列表二”（这两个是不同的路径），如何在一个选择/镜头中获得两个不同的路径？通过选择我的意思是用你的指针（突出显示）从网站上选择文本，不要将它与点击混淆。再次感谢，非常有帮助。

Answer 1

使用jQuery非常简单......

//click handler for the entire document
$(document).click(function (e) {
    //find the path from the current element to the html element
    var path = $(e.target).parents().addBack().map(function () {
        //find siblings of same type
        var siblings = $(this).siblings(this.tagName);
        //don't add the index if there are no siblings of same type
        return this.tagName + (siblings.length ? '[' + $(this).prevAll(this.tagName).length + ']' : '');
    }).get().join('/');
    console.log(path)
})

演示：Fiddle

使用您的方法

$(document).ready(function () {
    $(document).click(function (event) {
        console.log(getElementPath(event.target));
    });
});

演示：Fiddle

没有jQuery

document.getElementsByTagName('body')[0].onclick = function (e) {
    var array = [];
    var el = e.target;
    while (el != document) {
        var sibs = 0,
            sib = el.previousSibling;
        while (sib.previousSibling) {
            if (sib.tagName == el.tagName) {
                sibs++;
            }
            sib = sib.previousSibling;
        }

        array.push(el.tagName + (sibs ? '[' + sibs + ']' : ''));
        el = el.parentNode;
    }
    console.log('//' + array.reverse().join('/'))
}

演示：Fiddle

Answer 2

使用Jquery，您可以使用"*" selector

$(document).ready(function() {
  $( "*" ).bind( "click", function() {
     window.alert(getElementPath($( this ));
  });
}

用户使用javascript获取所选文本的节点路径

2 个答案: