Geek Answers Handbook

Is it possible to return a "selected" (for example, Firebug) css selector or dom id with jquery?

When you click on the “Click an element on a page to check” button with FireBug, it places a blue border around the target element and also returns the DOM identifier.

I am building an application and this feature would be great to add. You can hover over the elements and select the target by clicking on the return of the DOM identifier or CSS selector in the application.

Is there a jquery plugin that does this magic? Any other smart way?

Thank!

Jonathan

+5
source share
4 answers

, 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;
  });
+1
$("*").mouseenter(function() {
  $(".highlighted").addClass("unhighlighted").removeClass("highlighted");
  $(this).addClass("highlighted");
});

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

JSFiddle

+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');
    });
});​

: http://jsfiddle.net/3Yw4x/1/

+2

"favlets" (, ), . : http://slayeroffice.com/?c=/content/tools/modi.html, favlet - javascript, . "Mouseover DOM Inspector", .

0

More articles:


All Articles