Reputation: 9036
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.
Upvotes: 1
Views: 326
Reputation:
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)
Upvotes: 4