获取元素的jQuery选择器

Question

在伪代码中,这就是我想要的.

var selector = $(this).cssSelectorAsString(); // Made up method...
// selector is now something like: "html>body>ul>li>img[3]"
var element = $(selector);

原因是我需要将其传递给外部环境,其中字符串是我交换数据的唯一方式.然后,此外部环境需要发回结果以及要更新的元素.所以我需要能够为页面上的每个元素序列化一个唯一的CSS选择器.

我注意到jquery有一个selector方法,但它似乎不适用于此上下文.它仅在使用选择器创建对象时才有效.如果使用HTML节点对象创建对象,则它不起作用.

Answer 1

我现在看到一个插件存在(我也想到了同名),但这里只是我编写的一些快速JavaScript.它不需要考虑元素的id或类 - 只有结构(并添加:eq(x)节点名称不明确的地方).

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';

    var path, node = this;
    while (node.length) {
        var realNode = node[0], name = realNode.localName;
        if (!name) break;
        name = name.toLowerCase();

        var parent = node.parent();

        var siblings = parent.children(name);
        if (siblings.length > 1) { 
            name += ':eq(' + siblings.index(realNode) + ')';
        }

        path = name + (path ? '>' + path : '');
        node = parent;
    }

    return path;
};

Answer 2

TL; DR - 这是一个比看起来更复杂的问题,你应该使用一个库.

乍一看这个问题看起来很简单,但它比看起来更棘手,就像用链接替换普通URL一样非常重要.一些考虑:

• 使用后代选择器与子选择器可能会导致选择器不唯一的情况.
• 使用:eq()限制了解决方案的有用性,因为它需要 jQuery
• 使用tag + nth-child选择器可能会导致不必要的长选择器
• 不利用id会使选择器对页面结构的变化不那么鲁棒.

进一步证明问题并不像看起来那么容易:有10多个库生成CSS选择器,其中一个的作者发布了这个比较.

Answer 3

jQuery-GetPath是一个很好的起点:它会给你项目的祖先,像这样:

var path = $('#foo').getPath();
// e.g., "html > body > div#bar > ul#abc.def.ghi > li#foo"

Answer 4

这是Blixt的一个版本在IE中的作用:

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';

    var path, node = this;
    while (node.length) {
        var realNode = node[0];
        var name = (

            // IE9 and non-IE
            realNode.localName ||

            // IE <= 8
            realNode.tagName ||
            realNode.nodeName

        );

        // on IE8, nodeName is '#document' at the top level, but we don't need that
        if (!name || name == '#document') break;

        name = name.toLowerCase();
        if (realNode.id) {
            // As soon as an id is found, there's no need to specify more.
            return name + '#' + realNode.id + (path ? '>' + path : '');
        } else if (realNode.className) {
            name += '.' + realNode.className.split(/\s+/).join('.');
        }

        var parent = node.parent(), siblings = parent.children(name);
        if (siblings.length > 1) name += ':eq(' + siblings.index(node) + ')';
        path = name + (path ? '>' + path : '');

        node = parent;
    }

    return path;
};

Answer 5

我只是想分享我的版本,因为它很清楚.我在所有常见浏览器中测试了这个脚本,它就像老板一样工作.

jQuery.fn.getPath = function () {
    var current = $(this);
    var path = new Array();
    var realpath = "BODY";
    while ($(current).prop("tagName") != "BODY") {
        var index = $(current).parent().find($(current).prop("tagName")).index($(current));
        var name = $(current).prop("tagName");
        var selector = " " + name + ":eq(" + index + ") ";
        path.push(selector);
        current = $(current).parent();
    }
    while (path.length != 0) {
        realpath += path.pop();
    }
    return realpath;
}