JQueryの選択を表示

Question

特定のjquery選択で選択した項目/要素を確認することはできますか？

誰かがjqueryをデモするのを見ました。コンソールのいくつかのフォームを使用して、選択ごとに項目の配列を返しました。各項目をマウスオーバーしてブラウザで強調表示できました。

現在、アラート（$（ 'div'）。length）を使用しています。私が選択したものが何であるかを見るためにそのが役に立ちました。

Answer 1

これはあなたのJavaScriptコンソールにそれをログに記録でき、デバッグのために純粋である場合：

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

注：あなたはすでにそれを使用していない場合、私は非常に、firebugを使用することをお勧めします。

Answer 2

これまで、私はこの目的のためにjqueryプラグインを作成しました。それは、firebugのログコンソールを使用してjqueryの選択肢を記録します。 （あなたのWeb開発のための放火犯を使用しない場合、あなたが本当にそれを考慮する必要があります）

(function($){ 

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

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

ちょうどあなたが必要とするすべてのオプションのメッセージ

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

Answer 3

とjQueryの選択にデバッグを呼び出すそれを使用するにはあなたのコードでFirebugと、この1行です：

console.log(<<myJQuerySelection>>); 

例：

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

結果上にマウスを動かすと、ページ上で強調表示されます。

Answer 4

これはすべて良い例ですが、私がやることの1つは要素の周りに境界線を作成することです。

ブラウザで、何が選択されているかを簡単に確認できます（一部の要素がビューポートから隠されていない限り）。これは、Firebugがインストールされていない/有効になっていない場合にも便利です。

おそらく、CSSプロパティ 'outline'を使用して要素を2ピクセル拡張しないでください。