Question

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

I have the following code:

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

});

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

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

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.

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.

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.

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.

Answer 1

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.

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.

---

A more complete example

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

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

---

update with id and class shown as well : http://www.jsfiddle.net/gaby/hsv97/2/