Question

我想知道如何在给定的html页面上获取当前元素的信息以及所有父元素直到body标签。我想显示它的完整路径并显示当前元素的类/ id以及任何父类的属性，如类和id信息。此外，我想知道正在徘徊的当前元素是什么，例如它的div，p，a，li，ul，输入或其他任何东西。

如果有人可以给我指示或暗示，那将会有所帮助。我能够毫无问题地获取当前元素的信息，但无法找到哪个是当前元素。

请提供您的建议。感谢。

Answer 1

var txt = "";
function func(n,id) {
    if(!n) {
        n = document.getElementById(id);
    }
    if(n.tagName.toLowerCase()!='html') {
        txt += n.tagName+" with id="+(n.id?n.id:"<no id>")+" classes="+(n.className?n.className:"<no classes>")+"\n";
        func(n.parentNode,n.parentNode.id);
    }
}

最初用n作为＆＃39; null＆＃39;并传递节点的id。或者，如果您有节点的引用，则可以通过。两者都给出的原因是，某些元素可能没有id。有些人可能。这就是原因。在这里查看样本 -

http://jsfiddle.net/L8WhS/

Answer 2

几个星期前我编写了一个jQuery插件用于调试目的......

测试小提琴here

(function ($) {
    var getInfos = function () {
        var id = this.attr('id'),
            classes = this.attr('class');
        return [this[0].nodeName.toLowerCase() + (id ? '#' + id : '') + (classes ? '.' + classes.replace(/ +(\w)/, '.$1') : '')];
    }
    $.fn.getParentsStack = function () {
        if (!this.length) return '';
        var $t = this.eq(0),
            list = [getInfos.apply($t)];
        $t.parentsUntil('html').each(function (i, el) {
            list.push(getInfos.apply($(this)));
        });
        return list.reverse().join(' > ');
    };
})(jQuery);

显示当前元素信息的所有父元素，如名称，类，id或任何其他属性

2 个答案: