Question

我在asp里面有一个div：Repeater：

   <ItemTemplate>
          <div id="myDiv" style="display:none" />
   </ItemTemplate>
</asp:Repeater>

<script type="text/javascript">
    window.onload = function() {
          document.getElementById('myDiv').style.display = 'block';
</script>

这很有效，除了我的div元素出现在转发器中，这意味着只找到第一个div。有些人可以向我解释如何获得ItemTemplate中的所有div吗？

Answer 1

页面上不能有多个具有相同ID值的元素。改为使用类：

<ItemTemplate>
    <div class="myDiv" style="display:none" />
</ItemTemplate>

选择DIV：

document.getElementsByClassName('myDiv')
// or
document.querySelectorAll('.myDiv')
// or 
$('.myDiv') // jQuery

Answer 2

在页面上多次使用相同的ID无效。相反，你将不得不使用一些其他方法来查找你的元素，比如css类。 jQuery使这项任务变得简单。

$(".someClass").show();

但是，您甚至可能不需要这样做。如果您要做的只是在公共父项下的一组元素上更改某些样式，则只需更改父类的类名即可。考虑以下转发器：

<div id="repeaterParent">
    <asp:Repeater runat="server">
        <ItemTemplate>
            <div class="repeaterItemDiv"></div>
        </ItemTemplate>
    </asp:Repeater>
</div>

像这样设置你的CSS：

#repeaterParent .repeaterItemDiv
{
    display: none;
}
#repeaterParent.showDivs .repeaterItemDiv
{
    display: block;
}

然后使用此JavaScript：

document.getElementById("repeaterParent").className = "showDivs";

或者，这个jQuery：

$("#repeaterItemParent").addClass("showDivs");

Answer 3

如果您想在javascript中执行此操作，可以执行以下操作：

<div id="repeaterParent">
    <asp:Repeater runat="server">
        <ItemTemplate>
            <div id="myDiv" style="display:none" runat="server"/>
        </ItemTemplate>
    </asp:Repeater>
</div>

<script type="text/javascript">
    window.onload = function(){
          //get the parent element
          var ParentEle=document.getElementById('repeaterParent');
          //get all the div tags within parent element
          var AllDivInParentEle=ParentEle.getElementsByTagname('DIV');
          //loop div elements and do what is required
          for(var i=AllDivInParentEle.length-1;i>=0;i--){
            AllDivInParentEle[i].style.display = 'block';
          }
   }
</script>

对div使用runat =“server”会给它自己的id。但是如果div不需要id，那么javascript方法仍然可以工作，因为它依赖于父元素id。

所以你可以替换

<div id="myDiv" style="display:none" runat="server"/>

与

<div style="display:none">

如何在asp：Repeater中使用getElementbyId作为标记

3 个答案: