返回带有jQuery的XPath位置?需要有关功能的一些反馈 [英] Return XPath location with jQuery? Need some feedback on a function

问题描述

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

For the following project I will be using PHP and jQuery.

我有以下代码:

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

});

用户单击元素后，我希望它返回该元素的XPath位置.

Once a user clicks on an element I want it to return the XPath location of that element.

我本质上想要做的是一种在jQuery的帮助下的过滤系统.

What I want to do essentially is sort of a filtering system with a little help of jQuery.

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

PHP will retrieve a document from an outside source with PHP, using jQuery a user click on an element/relevant parts of that document. This jQuery function will return the XPath location of where the user clicked and is stored and associated with that document.

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

In the future if that document is updated, using the XPath, PHP will retrieve only the XPath that was selected by the user previously instead of the whole document.

我将需要此jQuery函数还返回元素属性，例如<p>中的标题或锚链接中的href位置.

I will need this jQuery function to also return element attributes such as the title in a <p> or href location in an anchor link.

长话短说:我的问题是，这在jQuery中甚至可能吗?返回所选元素的XPath位置及其属性?我不知道这在jQuery中会是什么样子，所以将不胜感激.

Long story short: My question is, is this even possible in jQuery? Returning the XPath location of a selected element along with it's attributes? I have no idea what this would look like in jQuery so any help would be appreciated.

其他任何反馈也将非常有用.据我所知，我可能使用了错误的工具……之类的东西.谢谢.

Any other additional feedback would be great too. As far as I know I could be using the wrong tools... or something. Thanks.

推荐答案

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

You can use the .parents() method, to get all ancestors of the clicked element.

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

，然后提取所需的信息.

and then extract the info you want.

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

Use the .delegate method to handle the event, so you do not need to attach it to all elements. And also use the .andSelf() method to include in the path the item that was clicked as well.

更完整的示例

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

带有测试html的示例，可在 http://www.jsfiddle.net/gaby/hsv97/1/上播放

Example with a test html to play at http://www.jsfiddle.net/gaby/hsv97/1/

更新并显示id和class: http://www.jsfiddle.net/gaby /hsv97/2/

这篇关于返回带有jQuery的XPath位置?需要有关功能的一些反馈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！