jak wygenerować ścieżkę CSS za pomocą javascript lub jquery?

Question

Wszelkie sugestie dotyczące generowania ścieżki CSS dla elementu?

Ścieżka CSS to ścieżka selektorów CSS potrzebnych do identyfikacji konkretnego elementu, na przykład, jeśli mój html jest:

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

wtedy, ścieżka klasy do "3" będzie div#foo div.bar ul li span.selected

JQuery używa ścieżek klas do identyfikowania elementów DOM i może stanowić dobre rozwiązanie, ale do tej pory nie mogłem go znaleźć.

Answer 1

nie rozumiem dlaczego ten jest downvoted, dobre i uzasadnione pytanie

oto (uproszczony) przykład tego, jak można to zrobić

<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

Generowanie ścieżki CSS elementu

Pełna ścieżka Ex: korpus/footer.Footer/div.Footer-wewnętrzna/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++; 
    } 
} 

Krótka ścieżka Ex: 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; 
} 

test

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

Aby wygenerować Xpath