显示任何对象的完整DOM信息

Question

在Google Chrome中检查元素时，您会看到以下内容：

html body div #content #mainbar form#post-form.post-form div#question-form div#post-editor.post-editor div div.wmd-containier ... span

jQuery中是否有方法或解决方案为任何对象显示相同的字符串？

Answer 1

让我们尝试编写一个作为jQuery插件 - 它应该是微不足道的。我们所需要的只是找到节点的父节点和节点本身，然后生成一个包含（小写）标签名称的字符串，以及（如果提供的话）ID和类：

(function($) {
    function tag(el) {
        var r = el.tagName.toLowerCase();
        if (el.id) {
            r += '#' + el.id;
        }
        if (el.className) {
            r += '.' + el.className.replace(/\s+/g, '.');
        }
        return r;
    }

    $.fn.path = function() {
        var node = this.get(0);    // in case multiple elements are passed
        return $(node).parents().add(node).get().map(tag).join(' ');
    }
})(jQuery);

在这个stackoverflow页面上试试这个：

$('.vote').path()
> "html body.question-page.new-topbar div.container div#content.snippet-hidden 
   div div#mainbar div#question.question table tbody tr td.votecell div.vote"

Answer 2

这将创建一个带有id和类名的选择器，您可以在map函数中添加更多属性检测：

var getSelector = function(t){
    var elements = [];
    while( t.parentNode ){
        elements.push( t );
        t = t.parentNode;
    }
    var selector = elements.reverse().map( function( elm ){
       var elementSelector = elm.nodeName.toLowerCase();
        if( elm.id ){
            elementSelector += '#' + elm.id
        }
        if( elm.className ){
            elementSelector += '.' + elm.className.split(/\s/).join('.')
        }
        selector += elementSelector;
        return elementSelector;
    }).join(' ');
    return selector;
}

http://jsfiddle.net/41dq3rbq/2/