Uzyskaj unikalny selektor jQuery

Question

Potrzebuję być w stanie uzyskać selektor unqiue dla każdego elementu na stronie.

Na przykład po kliknięciu na elemencie chcę zrobić coś takiego:

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

Więc po zapisaniu wartości sel w DB mogę uzyskać tę wartość i łatwo uzyskać dostęp do elementu przez

var el = $(sel);

nie mogę zmienić, i nic o strukturze HTML strony nie wiem i nie mogę po prostu dodać unikatowy identyfikator (za pomocą JS) do każdego elementu, jak byłoby to nieefektywne.

Answer 1

Innym rozwiązaniem może być wędrować w górę drzewa DOM i stworzyć ścieżkę do elementu, który można zapisać i wykorzystać go później jako selektor ponownie, chociaż t kapelusz może nie być kuloodporny, ale może jest to punkt, od którego możesz zacząć.

Edycja: Aktualizacja odpowiedzieć propozycję w komentarzu, teraz zwraca id jeśli dostępne

Wystarczy odwiedzić przykład na JSBin I kliknij document dwukrotnie. jednak zauważyć, co zostanie podświetlony ..

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

Jednym ze sposobów, aby to zrobić, jest uzyskanie wszystkich informacji, które można uzyskać na klikniętym elemencie. Więc po zapisaniu go do bazy danych można zapisać go jako tekst, na przykład: Jeśli element kliknąłeś na to: <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); 
}); 

można później znaleźć element przy użyciu atrybutów masz lub po prostu użyć

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

myślę, że to powinno pomóc