Is there a way to generate a CSS selector based on a DOM element in jQuery

Question

Is there a way to take a DOM object and infer a CSS selector that could be used to find that element at a later time.

Example:

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

Where the get_css_selector would return something similar to .items li:eq(1) or at least a string that would work to select the element.

Bonus would be if there was a method to generate a CSS selector based on:

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

Answer 1

It appears as though you're trying to use the original selector. Am I right about that? Or have I over-simplified things?

The original selector is stored in the jQuery object you created.

Try it: http://jsfiddle.net/9JUJL/

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

Or for the bonus, this? http://jsfiddle.net/9JUJL/2/

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