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>
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) + ')';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With