0

このようなレイアウトがあり、AreaForMapsnノードに到達して非表示にする必要があります

これは私のHTMLです：

<div id="layout1" class="layout1_wrapper">

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps1" name="AreaForMaps1">
                <div id="googlemaps1">
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps2" name="AreaForMaps2">
                <div id="googlemaps2">
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps3" name="AreaForMaps3">
                <div id="googlemaps3">
                </div>
            </div>
        </div>
    </div>

</div>

JavaScript：

<script>
document.getElementById("Button").onclick = function(){  
//need to reach all AreaForMapsXXX divs and hide them  
var myDiv = document.getElementById( "layout1" );
var children = document.getElementById(layout1).childNodes;

  for(i=0; i<children.length; i+=3) { 
    document.getElementById(children[i].id).style.display = "none";
  }  
}
</script>
4

2 に答える 2

2

考えられる方法の1つは、「AreaForMaps」などのクラスをそれらすべてに追加してから、単純にdocument.getElementsByClassName（またはjQueryまたは使用しているものを）使用することです。

于 2012-10-21T16:29:37.500 に答える
1

それについて行くにはいくつかの方法があります。これが1つの方法です。

document.getElementById("Button").onclick = function(){  
    var myDiv = document.getElementById( "layout1" );
    var divs = myDiv.getElementsByTagName("div");

    for(i=0; i<divs.length; i++) { 
      if (divs[i].id.indexOf("AreaForMaps") === 0)
          divs[i].style.display = "none";
    }  
}

あなたのコードは、の直接の子であるノードのみをターゲットにしており"layout1"、テキストノードを含んでいました（タブと改行文字はDOMのノードとして表されます）。

このコードは、から派生するすべてのdiv要素を取得"layout1"し、IDの最初の部分がで始まることを確認してから非表示に"AreaForMaps"します。

サポートするブラウザーのリストにIE8以降のみが含まれている場合は、代わりにこれを行うことができます。

document.getElementById("Button").onclick = function(){  
    var divs = document.querySelectorAll( "#layout1 div[id^=AreaForMaps]" );

    for(i=0; i<divs.length; i++)
        divs[i].style.display = "none";
}
于 2012-10-21T16:28:59.180 に答える