Question

我正在尝试在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这个术语，但我不确定这是不是。

快乐，享受生活。

Answer 1

以下函数使用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。

Answer 2

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

在Jquery中不再提供XPath。

如果您需要Xpath，只需在FF或Chrome下使用Firebug。

关于选择任何选项（选项）：

$("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(){});

等等

html dom中所选元素的路径是什么？

2 个答案: