Можно ли вернуть «выделенный» (например, Firebug) css-селектор или dom id с помощью jquery? - PullRequest
Новая
       26

Можно ли вернуть «выделенный» (например, Firebug) css-селектор или dom id с помощью jquery?

5 голосов
/ 10 мая 2010

Когда вы нажимаете стрелку «Щелкните элемент на странице для проверки» с помощью FireBug, он помещает синюю рамку вокруг целевого элемента, а также возвращает идентификатор DOM.

Я создаю приложение, и эту функцию было бы здорово добавить. Уметь наводить курсор на элементы и выделять цель, нажав кнопку «Вернуть» DOM Id или селектор CSS в приложение.

Есть ли плагин jquery, который делает это волшебство? Какой-то другой умный способ?

Спасибо!

Jonathan

Ответы [ 4 ]

4 голосов
/ 10 мая 2010 
$("*").mouseenter(function() {
  $(".highlighted").addClass("unhighlighted").removeClass("highlighted");
  $(this).addClass("highlighted");
});

$("*").mouseleave(function() {
  $(this).removeClass("highlighted").parents(".unhighlighted").first().addClass("highlighted");
});

JSFiddle

2 голосов
/ 10 мая 2010

Легко сделано. То, что вас интересует, это target: 

$(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/

1 голос
/ 14 мая 2010

Я использовал то, что предоставил 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;
  });
0 голосов
/ 10 мая 2010

Есть некоторые «фавориты» (сценарии, которые вы добавляете в избранное), которые делают то же самое. Вот один из них: http://slayeroffice.com/?c=/content/tools/modi.html, поскольку favlet - это просто старый javascript, вы можете использовать его код на своей странице Нажмите на ссылку «Mouseover DOM Inspector», чтобы увидеть эффект.

...