"Vurgulanan" (Firebug gibi) css selektörünü veya dom kimliğini jquery ile döndürmek mümkün mü?

Question

"Göz atmak için sayfadaki bir öğeye tıklayın" okunu FireBug ile tıklattığınızda, hedef öğenin etrafında bir Mavi Kenarlık koyar ve ayrıca DOM Kimliği'ni döndürür.

Bir uygulama yapıyorum ve bu özellik eklemek harika olurdu. DOM Kimliği veya CSS seçiciyi uygulamaya döndürdüğünüzde, öğeler üzerine gelin ve hedefi vurgulayın.

Bu sihiri yapan bir jQuery eklentisi var mı? Diğer bazı akıllı yolu?

Teşekkür !,

Jonathan

Answer 1

ve cssPath almak, i bana css seçici döndüren aşağıdaki $.fn.cssPath fonksiyon yazdım gelecekte bu öğeye başvurmak için. Şimdiye kadar çalışıyor.

  $.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

benzer bir şey yapmak bazı "favlets" (eğer sık ​​kullanılanlara eklemek komut dosyaları) vardır. İşte bir: http://slayeroffice.com/?c=/content/tools/modi.html favlet sadece düz bir eski javascript olduğundan, sayfanızda bu kodu kullanabilirsiniz. Efekti görmek için "Mouseover DOM Inspector" linkine tıklayın.

Answer 4

Kolayca yapılır. Ne ilgilendiğiniz target geçerli:

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

Burada deneyin: Ben sağlanan Ne tster kullanılan http://jsfiddle.net/3Yw4x/1/