how to get a complete css selectors string from a given DOM object

Question

I want to write a function

function f (domEl){
    //some code here

    //returns a string
}

such that:

$(f(domEl))[0] == domEl

should always return true (of course, regardless at what hierarchy domEl is):

As an example, Let's say:

HTML
    body
        ul
            li
            **li**
            li
                ul
                    li

and, I want to select bold li element. I get that element and pass that into my function f.

This doesn't make too much sense to me. Is domEl of type HtmlElement i.e. that would be returned from document.getElementById()? — gideon
– gideon, Commented Mar 1, 2012 at 4:53
neither did it make sense to me, but It was asked as an interview question. But, having css selector string from a DOM element might be useful. — hrishikeshp19
– hrishikeshp19, Commented Mar 1, 2012 at 4:56
<ul><li><**li**> is wrong HTML tag. <li> always comes under <ul>. So, How three <li> comes consecutively here ? — Umesh Patil
– Umesh Patil, Commented Mar 1, 2012 at 5:09
This is nothing to do with hierarchy, $("<any_selector>") returns a special jquery object and standard javascript returns "standard" htmlXXElement types. If you pass a DOMElement into $() it converts it into a JQuery object. Asking for $(domEl) == f(domEl) makes more sense, unless they want you to change the JQuery source. — gideon
– gideon, Commented Mar 1, 2012 at 5:10

score 4 · Accepted Answer · 2012-03-07 21:05:44Z

4

DEMO: http://jsfiddle.net/vzWgb/

function f (domEl){
    var s = [],
        node = domEl;

    do {
        s.unshift(build_nth_selector(node));
    } while((node = node.parentNode) && node !== document.body)

    s.unshift('BODY')

    return s.join(' > ');
}

function build_nth_selector(node) {
    var p = 1,
        n_name = node.nodeName.toUpperCase();
    while (node = node.previousElementSibling)
        ++p;
    return n_name + ':nth-child(' + p + ')'
}

var $ = function(s) { return document.querySelector(s); };

var el = document.getElementById('target');

alert(f(el));

alert($(f(el)) === el);

The selector looks like this (for the code I used in the example)...

BODY > DIV:nth-child(1) > DIV:nth-child(1) > UL:nth-child(1) > LI:nth-child(2) > UL:nth-child(1) > LI:nth-child(5)

edited Mar 7, 2012 at 21:05

answered Mar 1, 2012 at 5:16

user1106925

Sign up to request clarification or add additional context in comments.

9 Comments

Umesh Patil Over a year ago

It's really a smart java script

hrishikeshp19 Over a year ago

I am sorry, but its not working for all cases, have a look here: jsfiddle.net/vzWgb/2

user1106925 Over a year ago

@hrishikeshp19: Here's an update that builds the nth-child selector for each element on the way up. It stops at the body assuming that you really don't need to go any further.

user1106925 Over a year ago

@hrishikeshp19: And here's another one that simplifies the selector so it will only use :nth-child() when there are previous elements, resulting in a cleaner selector BODY > DIV > DIV > UL > LI:nth-child(2) > UL > LI:nth-child(5).

user1106925 Over a year ago

@hrishikeshp19: And one more that adds an optimization where if the element has an ID attribute, it simply returns an ID selector, since IDs must be unique on the page.

|

Collectives™ on Stack Overflow

how to get a complete css selectors string from a given DOM object

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related