0

OK、私はシンプルな HTML ドキュメントを持っています:

<head>
</head>

<body>
<div id="notInvolved">  This div is static</div>
<div id="thing01"></div>
<div id="thing02"></div>
<div id="thing03"></div>
</body>

外部 JavaScript を使用して div を操作したいと考えています。MY PLANは次のとおりでした

  1. divCounter という配列を作成します
  2. IDごとにdivを追加する##
  3. 配列の長さを取得する
  4. 配列サイズによって管理される for ループでは、一度に 1 つの div をロードし、いくつかのデータを追加し、次の div に移動して、さらにいくつかのデータを追加し、吐き気がするまで、div がなくなるまで続けます。

ただし、動的配列を作成する方法が明らかにわかりません...（これを静的に行うことはできません。最終的にいくつのことを知りません## divが必要です）

私はできると思ったしvar divCounter = [document.getElementById("thing"+ * + *)]; 、それは文字列を追加するだろう (例えばthing01, Thing02). しかし、それはうまくいきません。のワイルドカードをどのように設定しますgetElementByIdか? できないならどうやってできるの？

これを達成する方法はありますか、それとも間違ったツリーを吠えていますか? 新人なんて嫌だ……。

4

5 に答える 5

3

非常に一般的に言えば（作業するコードがほとんど提供されていないため）IDは、物事が一意である場合に使用する必要があり、クラスはグループでアクセスできる必要がある場合に使用する必要があります。次のようなことを行う方がはるかに理にかなっています。

<body>
  <div id="notInvolved">  This div is static</div>
  <div id="thing01" class="affected"></div>
  <div id="thing02" class="affected"></div>
  <div id="thing03" class="affected"></div>
</body>

それらを結合する何かを取得したら、それらdocument.getElementsByClassName('affected')を取得するために使用できます。forこれは、ループやその他の構造を使用して個々の要素を取得しようとするよりも、おそらくはるかに意味があります。

于 2012-07-13T17:41:18.660 に答える
0

変更する動的 div でクラスを使用してから、 getElementsByClassNameからの結果をループする必要があります。

var dynamicDivs = document.getElementsByClassName('dynamic');

for (var i = 0; i < dynamicDivs.length; i++) {
    // do whatever you want with dynamicDivs[i]
}
于 2012-07-13T17:50:01.983 に答える
0

ワイルドカードを使用してページ上のすべての要素を選択し、正規表現を使用して要素をフィルタリングできます。 

 var all =document.getElementsByTagName('*');
 var r = /^thing\d+$/;
 var test = function(el){
      return r.test( el.getAttribute('id'));
 }
 var elements = [];
 for(var i=0,l=all.length;i<l;i++)
     If(test(all[i]))
         elements.push(all[i]);
于 2012-07-13T17:43:33.637 に答える
0

あなたが達成しようとしていることを完全には理解していませんでした。とにかく、文字列「thing」で始まる ID を持つ場合にのみ要素を配列に追加する方法のアイデアを提供するために、for ループ、getElementByTagName 関数の使用方法とその方法の簡単な例を次に示します。 DOM の要素のプロパティにアクセスします。本当にやりたかったこと (配列に要素を追加すること) は、divCounter 配列の push メソッドを使用して実行されます。

var everyDiv = document.getElementsByTagName('div');
var divCounter = [];
for( var i = 0; i < everyDiv.length; i++ ){
    var currentDiv = everyDiv[i];
    var currentID = currentDiv.id; 
    if (currentID != null && currentID.indexOf('thing') == 0){
        divCounter.push(currentDiv);
    };
}
var res = divCounter.length;

もちろん、これはわかりやすくするためです。別の視点から問題に取り組み、より正確な方法でコード化したはずです。私は他の答えに同意します。これらの div 間で共有されるクラスは、これらの要素を選択するための最良の方法です。同じ（手続き的なアプローチも同じ）例は次のとおりです。

var everyDiv = document.getElementsByTagName('div'), 
    divCounter = [], 
    i, currentID;
for( i = 0; i < everyDiv.length; i++ ){
    currentID = everyDiv[i].id;
    if ( currentID && currentID.indexOf('thing') == 0){
        divCounter.push(everyDiv[i]);
    };
}

これはまったく同じですが、最初に変数の宣言があります。JavaScript では、変数のスコープはコードのブロックではなく関数であるため、最初に単一の「var」宣言で関数を開始するのが理想的です。

于 2012-07-13T18:03:27.383 に答える
0 
function load() {
  var divTags = document.getElementsByTagName("div");
  var divArray = new Array();
  var j = 0;
  for(i = 0; i < divTags.length; i++) {
    if(divTags[i].id.substr(0,5) == "thing") {
      divArray[j++] = divTags[i].id;
    }
  }
  for(i = 0;i < divArray.length; i++)
    alert(divArray[i]);
}
于 2012-07-13T18:07:03.823 に答える