javascript - 获取元素的 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.name;
        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;
};

(许可证:麻省理工学院)