Uzyskiwanie selektora jQuery dla elementu

Question

W kodzie psuedo, tego właśnie chcę.

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

Powodem jest to, że muszę przekazać to do zewnętrznego środowiska, gdzie ciąg jest moim jedynym sposobem wymiany danych. To zewnętrzne środowisko musi następnie odesłać wynik wraz z elementem do aktualizacji. Dlatego muszę mieć możliwość serializowania unikalnego selektora CSS dla każdego elementu na stronie.

Zauważyłem, że jquery ma metodę selector, ale nie wydaje się działać w tym kontekście. Działa tylko wtedy, gdy obiekt został utworzony za pomocą selektora. Nie działa, jeśli obiekt został utworzony za pomocą obiektu węzła HTML.

Answer 1

Teraz widzę, że plugin istniał (o tej samej nazwie myślałem zbyt), ale tutaj jest tylko kilka szybkich skryptów JavaScript, które napisałem. Nie bierze pod uwagę identyfikatorów i klas elementów, tylko struktura (i dodaje :eq(x), gdzie nazwa węzła jest niejednoznaczna).

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

jQuery-GetPath jest dobrym punktem wyjścia: będzie ona daje przodków pozycja, podobnie jak to:

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

Answer 3

Oto wersja odpowiedzi Blixt, że działa w 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 4

Chciałem podzielić się moją wersję zbyt ponieważ jest to bardzo jasne do zrozumienia. Testowałem ten skrypt we wszystkich popularnych przeglądarkach i działa jak boss.

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; 
} 

Answer 5

samo rozwiązanie jak ten jeden z @Blixt ale zgodny z wieloma elementami jQuery.

jQuery('.some-selector') może powodować jeden lub wiele elementów DOM. Rozwiązanie @ Blixt działa niestety tylko z pierwszym. Moje rozwiązanie łączy je wszystkie z ,.

Jeśli chcesz obsługiwać tylko pierwszy element to zrobić tak:

jQuery('.some-selector').first().getPath(); 

// or 
jQuery('.some-selector:first').getPath(); 

Ulepszona wersja

jQuery.fn.extend({ 
    getPath: function() { 
     var pathes = []; 

     this.each(function(index, element) { 
      var path, $node = jQuery(element); 

      while ($node.length) { 
       var realNode = $node.get(0), name = realNode.localName; 
       if (!name) { break; } 

       name = name.toLowerCase(); 
       var parent = $node.parent(); 
       var sameTagSiblings = parent.children(name); 

       if (sameTagSiblings.length > 1) 
       { 
        allSiblings = parent.children(); 
        var index = allSiblings.index(realNode) +1; 
        if (index > 0) { 
         name += ':nth-child(' + index + ')'; 
        } 
       } 

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

      pathes.push(path); 
     }); 

     return pathes.join(','); 
    } 
}); 

Answer 6

W nawiązaniu do tego, co napisał Alex. jQuery-GetPath jest świetnym punktem wyjścia, ale trochę go zmodyfikowałem, aby włączyć: eq(), pozwalając mi na rozróżnienie wielu elementów bez id.

Dodaj to przed linią powrotną getPath:

if (typeof id == 'undefined' && cur != 'body') { 
    allSiblings = $(this).parent().children(cur); 
    var index = allSiblings.index(this);// + 1; 
    //if (index > 0) { 
     cur += ':eq(' + index + ')'; 
    //} 
} 

powoduje przywrócenie ścieżkę jak "HTML> ciała> ul> # powitania li.5: eq (1)"

Answer 7

$.fn.getSelector = function(){ 
    var $ele = $(this); 
    return '#' + $ele.parents('[id!=""]').first().attr('id') 
       + ' .' + $ele.attr('class'); 
}; 

Answer 8

TL; DR - jest to bardziej złożony problem niż się wydaje i powinieneś użyć library.

---

Ten problem pojawia się proste na pierwszy rzut oka, ale to trudniejsze niż się wydaje, tak jak replacing plain URLs with links is non-trivial. Niektóre uwagi:

• Używanie selektorów potomnych względem selektorów podrzędnych może prowadzić do cases where the selector isn't unique.
• Korzystanie :eq() ogranicza użyteczność rozwiązania, ponieważ będzie ona wymagają jQuery
• Używanie znaczników + selektorów nth-child może spowodować unnecessarily long selectors
• Nie korzystając z identyfikatorów czyni selektor mniej robust to changes in the page structure.

Kolejny dowód, że problem nie jest tak proste jak się wydaje: istnieje ponad 10 bibliotek, które generują selektorów CSS i autor jednego z nich opublikował this comparison.

Answer 9

Jeśli szukasz kompleksowego rozwiązania innego niż jQuery, powinieneś wypróbować axe.utils.getSelector.

Answer 10

Możesz również rzucić okiem na findCssSelector, który jest używany w narzędziach programistycznych Firefoksa do zapisywania aktualnie wybranego węzła po odświeżeniu strony. Nie używa jQuery ani żadnej biblioteki.

const findCssSelector = function(ele) { 
ele = getRootBindingParent(ele); 
    let document = ele.ownerDocument; 
    if (!document || !document.contains(ele)) { 
    throw new Error("findCssSelector received element not inside document"); 
    } 

    let cssEscape = ele.ownerGlobal.CSS.escape; 

    // document.querySelectorAll("#id") returns multiple if elements share an ID 
    if (ele.id && 
     document.querySelectorAll("#" + cssEscape(ele.id)).length === 1) { 
    return "#" + cssEscape(ele.id); 
    } 

    // Inherently unique by tag name 
    let tagName = ele.localName; 
    if (tagName === "html") { 
    return "html"; 
    } 
    if (tagName === "head") { 
    return "head"; 
    } 
    if (tagName === "body") { 
    return "body"; 
    } 

    // We might be able to find a unique class name 
    let selector, index, matches; 
    if (ele.classList.length > 0) { 
    for (let i = 0; i < ele.classList.length; i++) { 
     // Is this className unique by itself? 
     selector = "." + cssEscape(ele.classList.item(i)); 
     matches = document.querySelectorAll(selector); 
     if (matches.length === 1) { 
     return selector; 
     } 
     // Maybe it's unique with a tag name? 
     selector = cssEscape(tagName) + selector; 
     matches = document.querySelectorAll(selector); 
     if (matches.length === 1) { 
     return selector; 
     } 
     // Maybe it's unique using a tag name and nth-child 
     index = positionInNodeList(ele, ele.parentNode.children) + 1; 
     selector = selector + ":nth-child(" + index + ")"; 
     matches = document.querySelectorAll(selector); 
     if (matches.length === 1) { 
     return selector; 
     } 
    } 
    } 

    // Not unique enough yet. As long as it's not a child of the document, 
    // continue recursing up until it is unique enough. 
    if (ele.parentNode !== document) { 
    index = positionInNodeList(ele, ele.parentNode.children) + 1; 
    selector = findCssSelector(ele.parentNode) + " > " + 
     cssEscape(tagName) + ":nth-child(" + index + ")"; 
    } 

    return selector; 

};