选定元素的 html dom 中的路径是啥？ [复制]
Posted
技术标签:
【中文标题】选定元素的 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 这个词，但不确定是不是这个词。
快乐并享受生活。
【问题讨论】：
【参考方案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 - 这是一个很棒的功能 ;-)
酷，我的搜索到此结束，谢谢以上是关于选定元素的 html dom 中的路径是啥？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章