如何使用javascript或jquery生成CSS路径？

Question

有关如何为元素生成CSS路径的任何建议？

CSS路径是识别特定元素所需的css选择器的路径,例如,如果我的html是:

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

那么,"3"的类路径就是 div#foo div.bar ul li span.selected

JQuery使用类路径来识别DOM元素,并且可能提供一个很好的解决方案,但直到现在我还是找不到它.

Answer 1

我不明白为什么这个被投票,一个好的和合法的问题

这是一个(过于简化的)示例,说明如何做到这一点

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