I need to be able to get an unqiue selector for each element on a page.

For example, when I click on an element I want to do something like this:

$(document).click(function(){
    var sel = getUniqueSel(this);
});

So, after storing the sel value in a DB I can get that value and simply access the element by

var el = $(sel);

I can't change and don't know anything about the HTML structure of the page and I can't simply add unique ID's (using JS) to every element as this would be inefficient.

I need to be able to get an unqiue selector for each element on a page.

For example, when I click on an element I want to do something like this:

$(document).click(function(){
    var sel = getUniqueSel(this);
});

So, after storing the sel value in a DB I can get that value and simply access the element by

var el = $(sel);

I can't change and don't know anything about the HTML structure of the page and I can't simply add unique ID's (using JS) to every element as this would be inefficient.

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow asked Mar 12, 2013 at 12:18 XCSXCS 28.2k2828 gold badges104104 silver badges153153 bronze badges 5

• 1 Why cant you give the ones you are interested in an ID? Just curious? Are you really interested in every single object on the page? – mplungjan Commented Mar 12, 2013 at 12:19
• stackoverflow./questions/5442767/… – mplungjan Commented Mar 12, 2013 at 12:20
• @mplungjan I want to store the selectors for all clicked elements on a page :), and this script will be included on many pages. – XCS Commented Mar 12, 2013 at 12:21
• Calculate XPath for every clicked element and store it to DB, then follow the XPath to get the element. Here is the related question of how to do this: stackoverflow./q/3454526/1249581. – VisioN Commented Mar 12, 2013 at 12:23
• Can't you use a fixed part string and a timestamp as ID? You can add it "on-the-fly" to clicked elements and it'll be unique unless your user can do clicks within milliseconds... – Adriano Repetti Commented Mar 12, 2013 at 12:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Another approach might be to wander up the dom tree and create a path to the element, which you can save and use it later as a selector again, although that might not be bulletproof, but maybe its a point where you can start off.

Edit: Updated the Answer with your suggestion in the ment, now it returns the id if available

Just visit the example on JSBin And click the document twice. but notice what gets highlighted..

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';
    var path, node = this;
    if (node[0].id) return "#" + node[0].id;
    while (node.length) {
        var realNode = node[0],
            name = realNode.localName;
        if (!name) break;
        name = name.toLowerCase();
        var parent = node.parent();
        var siblings = parent.children(name);
        if (siblings.length > 1) {
            name += ':eq(' + siblings.index(realNode) + ')';
        }
        path = name + (path ? '>' + path : '');
        node = parent;
    }
    return path;
};
var sel;
$(document)
    .click(function (e, a) {
    if (!sel) {
        sel = $("#ment-21702402")
            .getPath();
        alert("Path is: " + sel + ", hiding the Element -> Click again to highlight");
    } else {
        $(sel)
            .css("background-color", "yellow");
    }
});

One way to do this is to get all the information you can get on the element that was clicked. So when you save it to the database you can save it as a text for example: If the element you clicked on is: <div> I'm a div </div>

$(document).click(function(){
    var tagName = $(this).prev().prop('tagName');
    var attributes = {}; 
    if( this.length ) {
        $.each( this[0].attributes, function( index, attr ) {
            attributes[ attr.name ] = attr.value;
        } ); 
    }
    var elText=$(this).html();
    saveToDB(tagName,attributes,elText);
});

You can later find the element using the attributes you have or simply use

$(tagName+'['+attribute+'="'+value+'"]:contains("'+elText+'")')

I think this should help