使用jquery实现一个生成某个DOM元素的xpath函数

最新推荐文章于 2023-02-15 11:52:16 发布

litCabbage

最新推荐文章于 2023-02-15 11:52:16 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/litCabbage/article/details/88893573

版权

实现一个函数，生成某个DOM元素的xpath，主要包含两部分：标签层级和兄弟元素中的顺序

功能如下：

<body>
	<ul>
		<li>
			<span>1</span>
		</li>
		<li>
			<span>2</span>
			<span>3</span>
			<span id="span_3">4</span>
		</li>
	</ul>
</body>

如果传入id="span_3"的元素，生成的xpath是body>ul[0]>li[0]>span[2] 实现如下文js代码，需引入jquery

function getPath($ele) {
        function path(el, obj) {
          if (el[0].nodeName === 'BODY') {
            obj['BODY'] = ''
            return obj
          } else if (el.parent()[0].nodeName === 'BODY') {
            var children = el.parent().children()
            for (var i = 0, len = children.length; i < len; i++) {
              if (el[0] === children[i]) {
                obj[el[0].nodeName] = i
              }
            }
            obj['BODY'] = ''
            return obj
          } else {
            var children = el.parent().children()
            for (var i = 0, len = children.length; i < len; i++) {
              if (el[0] === children[i]) {
                obj[el[0].nodeName] = i
              }
            }
            path(el.parent(), obj)
          }
        }
        let o = {};
        path($ele, o)
        var str = ''
        for (var k in o) {
          if (o[k] === '') {
            str += k + "&"
          } else {
            str += k + "[" + o[k] + "]" + "&"
          }
        }
        return str.trim().split("&").reverse().join(">").slice(1).toLowerCase()
}

// 使用
console.log(getPath($('#test')))

litCabbage

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用jquery实现一个生成某个DOM元素的xpath函数

实现一个函数，生成某个DOM元素的xpath，主要包含两部分：标签层级和兄弟元素中的顺序功能如下：<body> <ul> <li> <span>1</span> </li> <li> <span>2</span> <span&g...
复制链接

扫一扫