Có thể trả lại bộ chọn css "được đánh dấu" (như Firebug) hoặc id id với jquery không?

Question

Khi bạn nhấp vào "Nhấp vào phần tử trên trang để kiểm tra" mũi tên bằng FireBug, nó sẽ đặt Đường viền màu xanh lam xung quanh thành phần đích và cũng trả về Id DOM.

Tôi đang xây dựng một ứng dụng và tính năng đó sẽ tuyệt vời để thêm vào. Có thể di chuột qua các phần tử và làm nổi bật mục tiêu, sau khi nhấp vào trả về DOM Id hoặc bộ chọn CSS cho ứng dụng.

Có plugin jquery nào thực hiện phép thuật này không? Một số cách thông minh khác?

Cảm ơn !,

Jonathan

Answer 1

tôi đã sử dụng những gì tster cung cấp, và để có được cssPath, tôi đã viết như sau $.fn.cssPath chức năng mà trả về cho tôi những selector css để tham khảo yếu tố này trong tương lai. Cho đến nay nó hoạt động rất tốt.

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

Có một số "favlets" (kịch bản mà bạn thêm vào mục yêu thích) mà làm điều tương tự. Dưới đây là một: http://slayeroffice.com/?c=/content/tools/modi.html vì favlet chỉ là một javascript cũ đơn giản, bạn có thể sử dụng mã của nó trong trang của bạn. Nhấp vào liên kết "Thanh tra DOM di chuột qua" để xem hiệu ứng.

Answer 4

Dễ dàng thực hiện. Những gì bạn đang quan tâm là 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'); 
    }); 
});​ 

Hãy thử nó ở đây: http://jsfiddle.net/3Yw4x/1/