如何在asp:Repeater中使用getElementId作为标记

Question

我在asp:Repeater:中有一个div

   <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是无效的。相反，您将不得不使用一些其他方法来查找元素，例如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 2

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

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

选择DIV:

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

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