如何使用javascript获取元素的css选择器？

Question

是否有任何jQuery插件或javascript代码返回唯一选择特定元素的CSS选择器？

我正在寻找具有与Chrome开发者工具中的复制CSS路径功能相似的功能的东西，给我一个看起来像这样的选择器：

#question > table > tbody > tr:nth-child(2) > td > div > h2

我尝试过的答案

Get unique selector of element in Jquery

Get unique selector jQuery

Answer 1

不完美，但写得很快（适合你）：）

http://jsfiddle.net/k1qs69fz/7/

的代码：

function getCSSPath(el, callback){

    var fullPath = '';

    var cssPathFn = function (el, callback){

        var elPath = '';

        elPath = $(el).prop('tagName').toLowerCase();

        if(typeof $(el).attr('id') !== 'undefined'){

            elPath = elPath+'#'+$(el).attr('id');
        }

        if(typeof $(el).attr('class') !== 'undefined'){

            elPath = elPath+'.'+$(el).attr('class').split(' ').join('.');
        }

        fullPath = elPath+' '+fullPath;

        if(typeof $(el).parent().prop('tagName') !== 'undefined'){

            cssPathFn($(el).parent(), callback);
        }
        else{

            callback(fullPath);
        }
    };

    cssPathFn(el, callback);
}

的用法：

getCSSPath($('selector'), callbackFunction);

功能基于tag名称，id和class名称，indexes不受支持。


示例用法（对于JSFiddle上的HTML代码）：

$(document).ready(function (){

    getCSSPath($('#lorem-ipsum'), function (path){

        console.log(path);
    });
});

示例结果：

html body div#id1.c1.c2.c3 div#id2 div.c4.c5 span span.c6 ul li a span#lorem-ipsum 

Answer 2

刚找到这篇文章，看看唯一的答案，就因为它的复杂性和对使用jQuery函数的奇怪否认而感到震惊。抱歉批评，但是我真的被这个回调系统惊呆了。在这里，以易于使用的形式提供它：

function getCSSPath(el) {
    let rendered_path_parts = [];

    $( el ).parents().addBack().each((i, el) => {
        const $el = $( el );
        let current_el_path = $el.prop('tagName').toLowerCase();

        if ($el.attr('id')) {
            current_el_path += '#' + $el.attr('id');
        }

        if ($el.attr('class')) {
            current_el_path += '.' + $el.attr('class').split(' ').join('.');
        }

        rendered_path_parts.push( current_el_path );
    })

    return rendered_path_parts.join(' ');
}

$.fn.extend({
    getPath: function() {
        return getCSSPath(this.length === 1 ? this : this.eq(0));
    }
});

getCSSPath(some_element);
some_jquery_element.getPath();

请注意，呈现的选择器将不包含元素的索引，因此其描述性不如选择​​器开发人员工具为您提供的那样。