jQuery- Unique selector ex.
HTML
<div id="abc">1</div>
<div class="xyz">2</div>
<div class="xyz">3</div>
<div class="xyz">4</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style>
JavaScript
$(function () {
var selectors = [];
$('#abc, .xyz').each(function () {
var uniqueSelectorForThis = $(this).getPath();
selectors.push(uniqueSelectorForThis);
});
console.log(selectors);
});
jQuery.fn.extend({
getPath: function () {
var path, node = this;
while (node.length) {
var realNode = node[0],
name = realNode.localName;
if (!name) break;
name = name.toLowerCase();
var parent = node.parent();
var sameTagSiblings = parent.children(name);
if (sameTagSiblings.length > 1) {
allSiblings = parent.children();
var index = allSiblings.index(realNode) + 1;
if (index > 1) {
name += ':nth-child(' + index + ')';
}
}
path = name + (path ? '>' + path : '');
node = parent;
}
return path;
}
});