Действительно ли возможно возвратить “выделенный” (как Firebug) селектор CSS или dom идентификатор с jQuery?
При нажатии на стрелку "Click an element on the page to inspect" FireBug она помещает Синюю Границу вокруг целевого элемента и также возвращает идентификатор DOM.
Я создаю приложение, и та функция была бы потрясающа добавить. Смогите нависнуть над элементами и выделить цель при нажатии на возврат селектор идентификатора или CSS DOM к приложению.
Существует ли плагин jQuery, который делает это волшебство? Некоторый другой умный путь?
Спасибо!,
Jonathan
4 ответа
Я использовал то, что предоставил tster, и чтобы получить cssPath, я написал следующую функцию $. Fn.cssPath , которая возвращает мне селектор css для ссылки на этот элемент в будущем. Пока все работает отлично.
$.fn.cssPath = function() {
var currentObject = $(this).get(0);
cssResult = "";
while (currentObject.parentNode) {
if(currentObject.id) {
cssResult = currentObject.nodeName + '#' + currentObject.id + " " + cssResult;
break;
} else if(currentObject.className) {
cssResult = currentObject.nodeName + '.' + currentObject.className + " " + cssResult;
} else {
cssResult = currentObject.nodeName + " " + cssResult;
}
currentObject = currentObject.parentNode;
}
return cssResult.toLowerCase();
}
$("*").mouseenter(function() {
$(".highlight").removeClass("highlight");
$(this).addClass("highlight");
});
$("*").bind('click',function(event){
var value = $(this).cssPath();
$('#web_page_filter',top.document).val(value);
return false;
});
$("*").mouseenter(function() {
$(".highlighted").addClass("unhighlighted").removeClass("highlighted");
$(this).addClass("highlighted");
});
$("*").mouseleave(function() {
$(this).removeClass("highlighted").parents(".unhighlighted").first().addClass("highlighted");
});
Легко сделать. Вас интересует цель:
$(document).ready(function() {
$(document).click(function(e) {
alert(e.target);
$(".highlight").removeClass("highlight");
$(e.target).addClass("highlight");
var id = e.target.id; // or $(e.target).attr('id');
});
});
Попробуйте здесь: http://jsfiddle.net/3Yw4x/1/
Есть некоторые "фавлеты" (скрипты, которые вы добавляете в избранное), которые делают то же самое. Вот один из них: http://slayeroffice.com/?c=/content/tools/modi.html Поскольку favlet - это обычный javascript, вы можете использовать его код на своей странице. Нажмите на ссылку "Mouseover DOM Inspector", чтобы увидеть эффект.