选定元素的 html dom 中的路径是什么？ [复制]答案

【问题标题】：What is the path in the html dom for a selected element? [duplicate]选定元素的 html dom 中的路径是什么？ [复制]
【发布时间】：2011-05-26 10:33:57
【问题描述】：

我正在尝试获取特定对象的 html dom 中的路径。
使用 javascript 或 jquery。（当我选择/悬停在对象上时。）

我事先不知道结构。

例如：

<html>
    <body>
        <div>
            <div>
                Not selected
            </div>
            <div>
                Selected Text
            </div>
        </div>
    </body>
</html>

“选定文本”Div 路径应类似于：

//HTML/BODY/DIV[0]/DIV[1]

任何帮助将不胜感激。

我查看了this answer，但它没有给出有关元素索引的指示（在我的示例中，方括号中的值 - DIV[1] 中的 1）。

顺便问一下，这条路径有一个“技术”名称吗？
我见过 XPath 这个词，但不确定是不是这个词。

快乐并享受生活。

【问题讨论】：

标签： jquery html dom path

【解决方案1】：

$("html > div")[0].find("div")[1]

XPath 在 Jquery 中不再可用。

如果你需要 Xpath，只需要使用 FF 下的 Firebug，或者 Chrome。

关于选择anyelemtn（选项）：

$("option:selected")

要让 div 悬停：

$("div:hover")

或一个复选框：

$("checkbox:selected")

现在举个例子：

<div>
   <div class='again'>
      <select id='select1'>
         <option val='1'>
         <option val='2'>
      </select>


      <select id='select2'>
         <option val='1'>
         <option val='2'>
      </select>
   </div>
</div>

现在如何选择第一个列表：

$("#select2 > option:selected")

或

$('.again >select')[0].find("option:selected")

让 div 悬停：

('.secondDIv').hover(function(){
},function(){});

等等等等

【讨论】：

@user544287 我不确定你是否理解我的问题。我试图获取选择/悬停的任何元素的路径，而不仅仅是我给出的示例。

【解决方案2】：

以下函数使用 jQuery 执行您想要的操作：

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").click(function(event) {
        event.stopPropagation();
        window.alert(getElementPath(this));
    });
});

你可以测试一下here。

【讨论】：

@Julian，不客气 :) 我刚刚意识到它不会为没有兄弟姐妹的元素添加 [0] 索引，尽管您的示例确实如此，但我想这可以被视为一项功能，而不是错误:)
@Fredeeic Hamidi - 这是一个很棒的功能 ;-)
酷，我的搜索到此结束，谢谢