6

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

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

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

因此，将sel值存储在数据库中后，我可以获取该值并简单地通过以下方式访问元素

var el = $(sel);

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

4

2 回答 2

7

另一种方法可能是向上遍历 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");
    }
});
于 2013-03-12T12:55:46.173 回答
0

一种方法是获取您可以获取的有关被单击元素的所有信息。因此，当您将其保存到数据库时，您可以将其保存为文本，例如：如果您单击的元素是：<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+'")')

我认为这应该有帮助

于 2013-03-12T12:46:26.367 回答