jquery - JQuery 選択の表示

Question

特定の jquery 選択で選択したアイテム/要素を確認することはできますか?

誰かが jquery のデモを行っているのを見ました。彼らは、選択ごとに項目の配列を返す何らかの形式のコンソールを使用していました。各項目にマウスを合わせると、ブラウザで強調表示されました。

私は現在 alert($('div').length); を使用しています。役に立たないものを選択したことを確認します。

Answer 1

少し前に、この目的のために jquery プラグインを作成しました。これは、firebug のログ コンソールを使用して、jquery の選択をログに記録します。(Web 開発に Firebug を使用していない場合は、実際に検討する必要があります)

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

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

それを使用するには、オプションのメッセージを指定して jquery の選択に対して debug を呼び出すだけです

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

Answer 2

必要なのは、 Firebugとコード内の次の 1 行だけです。

console.log(<<myJQuerySelection>>);

例えば：

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

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

Answer 3

これが純粋にデバッグ用である場合は、javascript コンソールにログを記録できます。

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

注:まだ使用していない場合は、 firebugの使用を強くお勧めします。

Answer 4

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

$('div').css({border: '1px solid red'});

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

要素を 2 ピクセルずつ拡張しないように、おそらく CSS プロパティの「outline」を使用する必要があります。