2

次のようなコードを使用して、DIV を Javascript 変数にアタッチできることを知っています。

var targetDiv = jQuery('#targetDiv');

ただし、すべての DIV または特定のクラスの DIV を Javascript 変数にアタッチする方法を探しています。

したがって、次の要素がある場合:

<div id='bozo'>
<div id='ranger'>
<div id='smokey'>

私は変数で終わります：

bozo
ranger
smokey

私は多くの jQuery アプリを構築してきましたが、多くの場合、コード内で追跡する必要がある多くの div があります。アプリの開始時にこれらの div を変数に割り当てるよりも、これらの div を制御する簡単な方法を見つけたいと考えています。

jQuery または Javascript ソリューションのいずれかで問題ありません。

4

3 に答える 3

1

最も効果的な方法は、JavaScript オブジェクトを使用することです。

var divs = {};
$("div").each(function() {
    if ($(this).attr('id') !== undefined) {
        divs[$(this).attr('id')] = $(this);
    }
});

現在の HTML では、次のように div にアクセスできます。

divs["bozo"].show(0);
divs["ranger"]show(0);
divs["smokey"].show(0);

命名規則が異なるため、div ID の直後に JavaScript 変数に名前を付けることはできません。たとえば、test-divは HTML 要素では有効な ID ですが、JavaScript 変数では有効ではありません。

ただし、ID がたまたま有効な JavaScript 変数名である場合は、オブジェクトのニーモニック プロパティとしてアクセスできます。

divs.bozo.show(0);
divs.ranger.hide(0);

このデモを参照してください。

編集:div icktoofay と ABFORCE からの提案に基づいて、ID がないことを検出する機能を追加しました。

于 2013-08-03T05:16:04.527 に答える
1

すべての jQuery オブジェクトを javascript 変数/オブジェクトに割り当てる必要はないと思います。jQuery 構文は非常に使いやすいためです。
次のように、jQuery を使用すると非常に簡単に html 要素を参照できます。

$("div") // all div elements
$("div#foo") // div with id="foo"
$(".foo") // all element which have 'foo' class

ただし、JS オブジェクトに割り当てたい場合は、これを使用します。

var obj = new Object() // or = {};
$("div[id]").each(function(){
    obj[$(this).attr("id")] = $(this);
});
于 2013-08-03T05:37:58.527 に答える
1

「...ブラウザはid属性を持つ要素を独自にグローバルスコープに配置するため、コードを実行せずにこれらの変数にアクセスできます。」以下のコメントでの Blender の調査結果によると。したがって、ここに示すように、div の ID によってこれらの変数にアクセスできます。

http://jsfiddle.net/xhWwH/2

編集:参照目的で以前の回答を保持します。

私はこのタイプのプログラミングには同意しませんが (非常に安全ではありません!!!!)。これがあなたが探しているものだと思います： http://jsfiddle.net/haoudoin/xhWwH/

   $("div").each(function(index) {
       console.log(this.id);
       eval("" +this.id + "=this;");
   });

   console.log("creates: " + bozo);
   console.log("creates: " + ranger);
   console.log("creates: " + smokey);
   // reference to your div
   alert(bozo.id);;
于 2013-08-03T05:22:12.153 に答える