È possibile restituire il selettore di css "evidenziato" (come Firebug) o dom id con jquery?

Question

Quando si fa clic sulla freccia "Fai clic su un elemento nella pagina da ispezionare" con FireBug, viene posizionato un bordo blu attorno all'elemento di destinazione e viene anche restituito l'ID DOM.

Sto costruendo un'applicazione e questa funzionalità sarebbe fantastica da aggiungere. Essere in grado di passare con il mouse sugli elementi ed evidenziare il target, facendo clic su return ID DOM o selettore CSS all'applicazione.

C'è un plugin jQuery che fa questa magia? Qualche altro modo intelligente?

Grazie !,

Jonathan

Answer 1

ho usato quello tster fornito, e per ottenere il cssPath, ho scritto il $.fn.cssPath seguente funzione che mi restituisce il selettore CSS fare riferimento a questo elemento in futuro. Finora funziona bene.

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

ci sono alcuni "favlets" (script che si aggiungono ai preferiti), che fanno la cosa simile. Eccone uno: http://slayeroffice.com/?c=/content/tools/modi.html dal momento che Favlet è solo un semplice vecchio javascript puoi usare il suo codice nella tua pagina. Clicca sul link "Mouseover DOM Inspector" per vedere l'effetto.

Answer 4

Facilmente fatto. Quello che ti interessa è il 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'); 
    }); 
});​ 

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