come generare CSS Path con javascript o jquery?

Question

Qualche suggerimento su come generare il percorso CSS per un elemento?

Un percorso CSS è il percorso di selettori CSS necessari per individuare un elemento specifico, per esempio, se il mio HTML è:

<div id="foo"> 
<div class="bar"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li><span class="selected">3</span></li> 
    </ul> 
</div> 
</div> 

poi, il percorso di classe a "3" sarebbe div#foo div.bar ul li span.selected

JQuery utilizza i percorsi di classe per identificare gli elementi DOM e potrebbe fornire una buona soluzione, ma fino ad ora non sono riuscito a trovarne uno.

Answer 1

Non capisco il motivo per cui questo è downvoted, una buona e legittima domanda

Ecco un (semplificato) esempio di come questo potrebbe essere fatto

<div id="a"> 
    <div class="b"> 
     <div><span></span></div> 
    </div> 
</div> 


<script> 
function getPath(elem) { 
    if(elem.id) 
     return "#" + elem.id; 
    if(elem.tagName == "BODY") 
     return ''; 
    var path = getPath(elem.parentNode); 
    if(elem.className) 
     return path + " " + elem.tagName + "." + elem.className; 
    return path + " " + elem.tagName; 
} 

window.onload = function() { 
    alert(getPath(document.getElementsByTagName("SPAN")[0])); 
} 
</script> 

Answer 2

Genera percorso Css di un elemento

Percorso completo Es: corpo/footer.Footer/div.Footer-interno/ul.FooterList/li.FooterList_item

function getFullCSSPath(element) { 
    if (element.tagName == 'HTML') return ''; 
    if (element===document.body)  return getShortCSSPath(element); 

    // To calculate position among siblings 
    var position = 1; 
    // Gets all siblings of that element. 
    // Gets the parent tree node of the current tree node. 
    var siblings = element.parentNode.childNodes; 
    for (var i = 0; i < siblings.length; i++) { 
     var sibling = siblings[i]; 
     // Checks Siblink with passed element. 
     if (sibling === element) { 
      var elemCssPath = getShortCSSPath(element); 
//console.log('====='+elemCssPath); 
//console.log('-----'+position); 
      return getFullCSSPath(element.parentNode)+'/'+elemCssPath; // using recursion to find its parents untill root element HTML 
     } 
     // if it is a siblink & element-node then only increments position. 
     var type = sibling.nodeType; 
     if (type === 1 && sibling.tagName === element.tagName)   position++; 
    } 
} 

percorso breve Es: li.FooterList_item

function getShortCSSPath(element) { 
    var path = element.tagName.toLowerCase(); 
    if(element.id) 
     path += "#" + element.id; 
    if(element.className) 
     path += "." + element.className; 
    return path; 
} 

prova

var elem = document.getElementsByTagName('div')[20]; 
console.log('Full Path : '+getFullCSSPath(elem)); 
console.log('Short Path : '+getShortCSSPath(elem)); 

Per generare Xpath