javascript - 如何从给定的 DOM 对象获取完整的 css 选择器字符串

Question

我想写一个函数

function f (domEl){
    //some code here

    //returns a string
}

这样:

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

应该总是返回 true(当然，不管 domEl 在什么层级):

举个例子，假设:

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

并且，我想选择粗体 li 元素。我获取该元素并将其传递到我的函数 f 中。

Answer 1

演示: 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);

选择器看起来像这样(对于我在示例中使用的代码)...

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)