Question

如何用jQuery倒推已获得的元素对象在页面中的选择器字符串？

需求是这样的，要求点击页面中任意一个元素，即时显示该元素在页面中的选择器，效果大致是这样的：比如我选中了一个<p>元素，则结果应显示为“body>div#id.class>p”，chrome和firebug调试工具都有这个功能，但如何在前端页面实现还是有很大问题，经过多次改造，目前仍有瑕疵，求大神补完功能，不甚感激！
下面是目前我完成的部分：
/**
* iframe鼠标点击事件
*/
function iframeClick(){
$("#iframe").contents().find("body").click(
function(e) {
var selector = "";
var result = findSelector(null,e,selector);
}
)
}
/**
* 查找拼接目标元素的选择器字符串
* @param targetObj 当前操作的对象
* @param selector 需迭代的选择器字符串
* @returns {String} 完整选择器字符串
*/
function findSelector(targetObj,event,selector) {
if (targetObj == null) {
var targetObj = event.target;
console.log(targetObj);
}
if ($(targetObj).attr("id") != undefined) {
var current_id = "#"+$(targetObj).attr("id");
}
if ($(targetObj).attr("class") != undefined) {
var current_class= "."+$(targetObj).attr("class");
}
var current_selector = ">"+$(targetObj)[0].tagName + current_id + current_class;
selector = current_selector + selector;
if ($(targetObj).parent().is('body')) {
console.log("body>"+selector);
return 'body>' + selector;
} else {
return findSelector($(targetObj).parent(), selector);
}
}
目前的问题是，第一次获取的tagName是undefined，而且在同级有多个相同元素时如何准确定位

Answer 1

你可以修改下jquery文件

追答

不好意思，没看清需求