Obteniendo un selector jQuery para un elemento

Question

En código psuedo, esto es lo que quiero.

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

La razón es que tengo que pasar esto a un entorno externo, donde una cadena es mi única manera de intercambiar datos. Este entorno externo necesita enviar un resultado, junto con qué elemento actualizar. Así que necesito poder serializar un selector de CSS único para cada elemento en la página.

Me di cuenta de que jquery tiene un método selector, pero no parece funcionar en este contexto. Solo funciona si el objeto se creó con un selector. No funciona si el objeto se creó con un objeto de nodo HTML.

Answer 1

Ahora veo que existía un plugin (con el mismo nombre pensé demasiado), pero aquí está solo un poco de JavaScript rápido que escribí. No toma en consideración los ID o las clases de elementos – solo la estructura (y agrega :eq(x) donde el nombre de un nodo es ambiguo).

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 es un buen punto de partida: te dará los antepasados ​​del artículo, así:

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

Answer 3

Aquí hay una versión de la respuesta de Blixt que funciona en 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

Sólo quería compartir mi versión demasiado porque es muy claro de entender. Probé este script en todos los navegadores comunes y funciona como un jefe.

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

La misma solución que la de @Blixt pero compatible con múltiples elementos jQuery.

jQuery('.some-selector') puede dar como resultado uno o varios elementos DOM. La solución @ Blixt funciona lamentablemente solo con la primera. Mi solución los concatena todos con ,.

Si sólo desea manejar el primer elemento de hacerlo de esta manera:

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

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

Versión mejorada

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

En seguimiento de lo que escribió Alex. jQuery-GetPath es un gran punto de partida, pero lo he modificado un poco para incorporar: eq(), lo que me permite distinguir entre múltiples elementos sin id.

Añadir esto antes de la línea de retorno getPath:

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

Esto devolverá un camino como "html> body> ul # hola> 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: este es un problema más complejo de lo que parece y debes usar un library.

---

Este problema parece fácil a primera vista, pero es más complicado de lo que parece, al igual que replacing plain URLs with links is non-trivial. Algunas consideraciones:

• El uso de selectores de descendientes frente a los selectores de niños puede llevar a cases where the selector isn't unique.
• Usando :eq() limita la utilidad de la solución, ya que será requerir jQuery
• Usando etiqueta + n-ésimo hijo selectores puede resultar en unnecessarily long selectors
• No tomar ventaja de ids hace que el selector menos robust to changes in the page structure.

Otra prueba de que el problema no es tan fácil como parece: hay 10 + bibliotecas que generan selectores CSS, y el autor de uno de ellos ha publicado this comparison.

Answer 9

Si está buscando una solución integral que no sea jQuery, intente con axe.utils.getSelector.

Answer 10

También puede consultar findCssSelector, que se utiliza en las herramientas de desarrollador de Firefox para guardar el nodo seleccionado actualmente al actualizar la página. No usa jQuery ni ninguna biblioteca.

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; 

};