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

一种可能的方法是向所有这些添加一个类，比如“AreaForMaps”，然后简单地使用document.getElementsByClassName（或 jQuery 或您正在使用的任何东西）。

于 2012-10-21T16:29:37.500 回答
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 回答