Get unique selector jQuery

Question

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.

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, Mar 12 '13 at 12:19
http://stackoverflow.com/questions/5442767/returning-the-full-path-to-an-element — mplungjan, Mar 12 '13 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, Mar 12 '13 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: http://stackoverflow.com/q/3454526/1249581. — VisioN, Mar 12 '13 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, Mar 12 '13 at 12:33

Moritz Roessler · Accepted Answer · 2013-03-12T13:17:25.300

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 comment, 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 = $("#comment-21702402")
            .getPath();
        alert("Path is: " + sel + ", hiding the Element -> Click again to highlight");
    } else {
        $(sel)
            .css("background-color", "yellow");
    }
});

I could also check for `ID`s so if the div has an ID defined get the ID as the selector, otherwise get the path. I guess this will save some DB storage. — XCS, Mar 12 '13 at 13:12

score 0 · Answer 2 · answered Mar 12 '13 at 12:46

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

Saving element content's would be really inefficient. – XCS Mar 12 '13 at 13:11 — XCS, Mar 12 '13 at 13:11

Get unique selector jQuery

2 Answers2

Linked