jquery가있는 "강조 표시된"CSS 선택기 또는 DOM ID를 반환 할 수 있습니까?

Question

FireBug가있는 "검사 할 요소를 클릭하십시오"화살표를 클릭하면 파란색 테두리가 대상 요소 주위에 놓이고 DOM Id도 반환됩니다.

응용 프로그램을 만들고 있는데이 기능을 추가하는 것이 좋습니다. DOM ID 또는 CSS 선택기를 클릭하여 응용 프로그램에 반환하면 요소 위에 마우스를 올려 놓고 대상을 강조 표시 할 수 있습니다.

이 마법을 수행하는 jquery 플러그인이 있습니까? 다른 스마트 방법?

감사합니다!

조나단

Answer 1

하고 cssPath를 얻기 위해, 나는 나에게 CSS 선택기를 돌려 다음 $.fn.cssPath 기능을 썼다 앞으로이 요소를 참조 할 수 있습니다. 지금까지 그 위대한 일.

  $.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; 
    }); 

Answer 2

$("*").mouseenter(function() { 
    $(".highlighted").addClass("unhighlighted").removeClass("highlighted"); 
    $(this).addClass("highlighted"); 
}); 

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

JSFiddle

Answer 3

은 비슷한 일을 몇 가지 "favlets"(당신이 즐겨 찾기에 추가 스크립트)이 있습니다. 여기에 하나 : http://slayeroffice.com/?c=/content/tools/modi.html favlet 단지 평범한 오래된 자바 스크립트 때문에 귀하의 페이지에서 코드를 사용할 수 있습니다. "Mouseover DOM Inspector"링크를 클릭하면 효과를 볼 수 있습니다.

Answer 4

쉽게 할 수 있습니다. 당신이 관심있는 것은 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'); 
    }); 
});​ 

여기를보십시오 : 내가 제공하는 것을 tster 사용 http://jsfiddle.net/3Yw4x/1/