如何在 asp 中将 getElementId 用于标记：Repeater答案

【问题标题】：How to use getElementId for tag in an asp:Repeater如何在 asp 中将 getElementId 用于标记：Repeater
【发布时间】：2011-05-31 01:33:19
【问题描述】：

我在 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 吗？

【问题讨论】：

标签： c# javascript asp.net html css

【解决方案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");

【讨论】：

谢谢 gilly3。轻松获得最佳答案且易于理解。

【解决方案2】：

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

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

选择 DIV：

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

【讨论】：

是的，但是我要如何获取 javascript 中的元素？
@Coder 我为此推荐了一个库。

【解决方案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">

【讨论】：