JQuery 선택보기

Question

특정 jquery 선택에서 선택한 항목/요소를 볼 수 있습니까?

누군가 jquery를 데모하는 것을 보았고 모든 선택 항목에 대한 항목 배열을 반환하는 콘솔 형식을 사용하여 각 항목을 마우스 오버 할 수 있고 브라우저에서 강조 표시 할 수있었습니다.

현재 경고를 사용 중입니다. ($ ('div'). 길이); 무엇을 선택했는지 보려면 도움이됩니다.

Answer 1

이 당신이 당신의 자바 스크립트 콘솔에 로그온 할 수 디버깅 순수 경우 :

$('div').each(function() { 
    console.log($(this).id); 
}) 

참고 : 이미 그것을 사용하지 않는 경우 내가보기 엔, firebug의 사용을 권장합니다.

Answer 2

얼마 전이 목적을 위해 jquery 플러그인을 작성했습니다. Firebug의 로그 콘솔을 사용하여 jquery 선택 항목을 기록합니다. 단지

$(".example").debug("nodes found") 

Answer 3

모든 필요한 옵션 메시지와 함께 JQuery와 선택에 디버그를 호출

(function($){ 

function logThis() 
{ 
    console.debug(this); 
} 

jQuery.fn.debug = function(msg) 
{ 
    console.group(msg || "no message"); 
    this.each(logThis); 
    console.groupEnd(); 
    return this; 
}; 
})(jQuery); 

은 그것을 사용하는 (당신이 당신의 웹 개발에 불을 지르고를 사용하지 않는 경우, 당신은 정말 그것을 고려해야한다) 이다 Firebug 및 코드에서이 한 줄은 :

console.log(<<myJQuerySelection>>); 

예 :

console.log($('div')); 

결과 위에 마우스를 올려 놓으면 페이지에서 강조 표시됩니다.

Answer 4

이것들은 모두 좋은 예입니다. 한 가지 또한 요소 주변에 테두리를 만드는 것입니다.

그런 다음 어떤 요소가 뷰포트에서 숨겨져 있지 않으면 브라우저에서 쉽게 무엇을 선택했는지 볼 수 있습니다. 이것은 Firebug가 설치/활성화되어 있지 않은 경우에도 편리합니다.

'outline'CSS 속성을 사용해야하므로 요소가 2 픽셀 씩 확장되지 않습니다.