Question

我需要能够为页面上的每个元素获取一个unqiue选择器。

例如，当我点击一个元素时，我想做这样的事情：

$(document).click(function(){
    var sel = getUniqueSel(this);
});

因此，在将sel值存储在数据库中后，我可以获取该值并只需通过

访问该元素

var el = $(sel);

我无法更改，也不了解页面的HTML结构，我不能简单地为每个元素添加唯一ID（使用JS），因为这样效率很低。

Answer 1

另一种方法可能是漫游dom树并创建一个元素的路径，你可以保存它，然后再将它作为一个选择器使用它，虽然这可能不是防弹的，但也许它是你可以开始的一个点关闭。

编辑：在评论中更新了您的建议答案，现在它返回了ID（如果可用）

只需访问JSBin上的示例，然后点击document两次。 但请注意突出显示的内容..

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';
    var path, node = this;
    if (node[0].id) return "#" + node[0].id;
    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;
};
var sel;
$(document)
    .click(function (e, a) {
    if (!sel) {
        sel = $("#comment-21702402")
            .getPath();
        alert("Path is: " + sel + ", hiding the Element -> Click again to highlight");
    } else {
        $(sel)
            .css("background-color", "yellow");
    }
});

Answer 2

执行此操作的一种方法是获取可以在单击的元素上获得的所有信息。因此，当您将其保存到数据库时，您可以将其另存为文本，例如：如果您点击的元素是：<div> I'm a div </div>

$(document).click(function(){
    var tagName = $(this).prev().prop('tagName');
    var attributes = {}; 
    if( this.length ) {
        $.each( this[0].attributes, function( index, attr ) {
            attributes[ attr.name ] = attr.value;
        } ); 
    }
    var elText=$(this).html();
    saveToDB(tagName,attributes,elText);
});

您可以稍后使用您拥有的属性找到该元素，或者只使用

$(tagName+'['+attribute+'="'+value+'"]:contains("'+elText+'")')

我认为这应该有帮助

获得独特的选择器jQuery

2 个答案: