Может кому надо (часто использую в личных целях):
Часто бывает, что пользователю надо знать селектор для CSS или jQuery
Особенно к примеру разработчикам тем, чтобы указать какой селектор в css изменять
Привожу рабочий код инструмента, может кому надо (элегантный и простой):
<script>
$(function() {
$("*").click(function() {
var selector = $(this).parents()
.map(function() {
var id = $(this).attr("id");
var tagid = '';
if (id) {
tagid += "#"+ id;
} else {
var classNames = $(this).attr("class");
if (classNames) {
tagid += "." + $.trim(classNames).replace(/\s/gi, ".");
}
}
tagid = this.tagName+tagid;
return tagid;
})
.get().reverse().join(" ");
if (selector) {
selector += " "+ $(this)[0].nodeName;
}
var id = $(this).attr("id");
if (id) {
selector += "#"+ id;
}
var classNames = $(this).attr("class");
if (classNames) {
selector += "." + $.trim(classNames).replace(/\s/gi, ".");
}
alert(selector);
return false;
});
});
</script>
Пример: http://opencartadmin.com/freelancer/
Использование: берете любой HTML модуль: SEO CMS PRO, HTML блок, HTML+
Заполняете поле textarea модуля (или html виджет)
И вешаете на те схемы где нужно определить селектор
Потом заходите на страницу схемы и кликаете на любое место где нужно определить селектор, в alert окне будет нужный селектор (обычно используется три последних)