1

同じクラスのdivが5つありますが、IDが互いに重なり合っています。javascriptを使用してそれらをトラバースするにはどうすればよいですか？それらの名前はdiv1、div2、div3などです。

また、トラバース中に各divの属性を変更するにはどうすればよいですか？

どうもありがとうございます。

タム。

4

7 に答える 7

4

最近のブラウザでは、 getElementsByClassName関数を使用してそれらを取得できます。

var elements = document.getElementsByClassName('myClass');

for (var i = 0, n = elements.length; i < n; i++) {
  //..
}

elements.lengthHTMLCollectionsを反復処理するときの一般的な方法である、1回だけ取得していることに注意してください。

これは、これらのコレクションが「ライブ」であり、いつでも変更される可能性があり、反復ごとに長さプロパティにアクセスするのはコストがかかるためです。

完全なクロスブラウザの実装については、Resig氏による次の記事を確認してください。

編集：ここに、 DustinDiazgetElementsByClassNameクロスブラウザーの純粋なDOM実装のリファクタリングバージョンを残します。

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}
于 2009-09-16T06:12:49.303 に答える
2 
for(var i = 1; i++; i<=5){
    var div = document.getElementById("div" + i);
    //do stuff with div
}

編集：あなたはそれを「名前付き」div1 ... div5と呼んでいるようですが、それが機能するためにもid="div1"を指定する必要があります

于 2009-09-16T06:12:10.147 に答える
1

まず、この記事を読んでください

getElementsByClassName速度の比較

と

強化されたgetElementsByClassName

var elements = document.getElementsByTagName("div");

for ( var i = 0; len = elements.length; i < len; i ++ )
{
    if ( elements[i].className === "yourclassname" )
    {
        // change the desired attribute of element.
        //Eg elements[i].style.display = "none";
    }
}

各関数のjQueryを使用する

$(".yourclassname").each ( function() {
    // $(this) will fetch the current element
});
于 2009-09-16T06:11:48.680 に答える
1

PrototypeやjQueryのようなものを使用していますか？もしそうなら、トラバースが非常に簡単になるので、そのうちの1つを強くお勧めします。たとえば、Prototypeの場合、次のようになります。

$$('.className').each(function(s) {
    //what you want to do
});
于 2009-09-16T06:13:35.417 に答える
1

ライブラリベースの回答は明らかですが、それらの使用が制限されている場合は、 Firefox を使用するよりも互換性のある方法がいくつかdocument.getElementsByClassNameあります (新しくて輝かしい!) 。

于 2009-09-16T06:24:56.393 に答える
1

ハッキングするには少し手間がかかりますが、古いブラウザーでも queryselectorAll を有効にする方法に関する記事を次に示します。

http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed

Mootools または Prototype でこれを行うには:

 $$('.className').each(function(element, index) {
   //what you want to do
 });

Jquery では、同じ sans ダブルドルです (他の人が投稿したように):

 $('.className').each(function() {
   //what you want to do
 });
于 2009-09-16T06:58:19.740 に答える
0

jQuery ソリューションは次のとおりです。

すべての div の属性を設定します。

$(".yourclassname").attr("attribute","value");

すべての div のテキスト コンテンツを設定します。

$(".yourclassname").text("New content");

すべての div の html コンテンツを設定します。

$(".yourclassname").html("<h1>New content</h1><p>blah blah blah</p>");

jQuery ライブラリはhttp://jquery.com/にあります。

于 2009-09-16T06:30:51.217 に答える