有没有办法根据 jQuery 中的 DOM 元素生成 CSS 选择器答案

【问题标题】：Is there a way to generate a CSS selector based on a DOM element in jQuery有没有办法根据 jQuery 中的 DOM 元素生成 CSS 选择器
【发布时间】：2010-09-03 23:50:23
【问题描述】：

有没有办法获取一个 DOM 对象并推断出一个 CSS 选择器，以便以后找到该元素。

例子：

<ul class="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script type="text/javascript">
var second = $('.items li:eq(1)');
console.log(get_css_selector(second));
</script>

get_css_selector 会返回类似于.items li:eq(1) 的内容，或者至少是一个可以用来选择元素的字符串。

如果有一种方法可以生成基于以下内容的 CSS 选择器，那就太好了：

<script type="text/javascript">
var third = document.getElementsByTagName('li')[2];
console.log(get_css_selector(third));
</script>

【问题讨论】：

Get CSS path from Dom element 的可能副本。不过，对于一个写得很好的问题 +1。
啊谢谢！我去看看

标签： jquery dom jquery-selectors

【解决方案1】：

您似乎在尝试使用原始选择器。我说得对吗？还是我把事情过分简化了？

原始选择器存储在您创建的 jQuery 对象中。

试试看： http://jsfiddle.net/9JUJL/

var second = $('.items li:eq(1)');
var selector = second.selector;

还是为了奖金，这个？ http://jsfiddle.net/9JUJL/2/

function get_css_selector(elem) {
    var tag = elem.tagName.toLowerCase();
    return tag + ':eq(' + $(tag).index(elem) + ')';
}

【讨论】：

【解决方案2】：

function createElementSelector(elm, containedInEle) {
    containedInEle = typeof(containedInEle) != 'undefined' ? containedInEle : document;

    var segs = [];

    for (; elm && elm !== containedInEle; elm = elm.parentNode) 
    { 
        segs.unshift(':nth-child(' + childNumber(elm) + ')'); 
    }; 
    return '#' + elm.id + ' ' + segs.join(' '); 
}; 

function childNumber(child) { 
    var i = 0;
    while( child.nodeType == 1 && (child = child.previousSibling) != null) {
      i++;
    }
    return i + 1; 
};

【讨论】：