Question

我有这样的布局，我需要到达AreaForMaps n节点并隐藏它们

这是我的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>

Answer 1

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

Answer 2

有几种方法可以解决这个问题。这是一种方式。

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";
}

如何使用JavaScript访问HTML子记录

2 个答案: