Question

对于以下项目，我将使用PHP和jQuery。

我有以下代码：

$('*').onclick(function(){

});

一旦用户点击了一个元素，我希望它返回该元素的XPath位置。

我想要做的本质上是一种过滤系统，有点jQuery的帮助。

PHP将使用PHP从外部源检索文档，使用jQuery用户单击该文档的元素/相关部分。此jQuery函数将返回用户单击并存储并与该文档关联的XPath位置。

将来如果使用XPath更新该文档，PHP将只检索用户先前选择的XPath而不是整个文档。

我还需要这个jQuery函数来返回元素属性，例如锚点链接中<p>或href位置的标题。

长话短说：我的问题是，这在jQuery中甚至可能吗？返回所选元素的XPath位置及其属性？我不知道这在jQuery中会是什么样子，所以任何帮助都会受到赞赏。

任何其他额外的反馈也会很棒。据我所知，我可能正在使用错误的工具......或者其他东西。感谢。

Answer 1

您可以使用.parents()方法获取所点击元素的所有祖先。

$(document).delegate('*','click',function(){
  var path = $(this).parents().andSelf();
  return false;
});

然后提取您想要的信息。

使用.delegate方法处理事件，因此您无需将其附加到所有元素。并且还使用.andSelf()方法在路径中包含已单击的项目。

更完整的例子

$(document).delegate('*','click',function(){
    var path = $(this).parents().andSelf();
    var xpath='/';
    for (var i = 0; i < path.length; i++)
    {
        var nd = path[i].nodeName.toLowerCase();
        xpath += '/';
        if (nd != 'html' && nd != 'body')
        {xpath += nd+'['+ ($(path[i-1]).children().index(path[i])+1) +']';}
        else
        {xpath += nd;}                    
    }
    alert(xpath);
    return false;
});

在http://www.jsfiddle.net/gaby/hsv97/1/

播放测试html的示例

更新时也会显示id和class：http://www.jsfiddle.net/gaby/hsv97/2/

Answer 2

修复 Gaby又名G. Petrioli

向儿童添加“nd”

.children(nd)

全：

$(document).delegate('*','click',function(){
        var path = $(this).parents().andSelf();
        var xpath=''; // firebug xpath starts with '/html'
        for (var i = 0; i < path.length; i++) {
            var nd = path[i].nodeName.toLowerCase();
            if (nd =="tbody") continue;  // php DOMxpath ignores tbody? or browser fixes html?
            xpath += '/';
            if (nd != 'html' && nd != 'body')
            {xpath += nd+'['+ ($(path[i-1]).children(nd).index(path[i])+1) +']';} //! saving time ha?
            else
            {xpath += nd;}                    
        }
        alert(xpath);
        return false;
    });

使用jQuery返回XPath位置？需要一些功能的反馈

2 个答案: