使用jquery實現一個生成某個DOM元素的xpath函式
阿新 • • 發佈：2019-03-12
實現一個函式，生成某個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($