javascript - 通过 Javascript 隐藏 DataList 中除第一个元素以外的所有元素

Question

我有一个DataList，每行显示三个产品。我想要的是在每行的顶部显示“类别”名称。每个项目都包含类别，因此我只想在第一个项目上显示它，如果可能的话，也可以在不同的 div 上显示。目前我无法获取Label5，因此我可以对其执行一些操作。有什么想法吗？

<div id="dvProducts">
    <asp:DataList ID="rptCustomers" runat="server" BorderColor="Black" CellPadding="0"  RepeatDirection="Horizontal">
        <ItemTemplate>
             <asp:Label ID="Label5" runat="server" visible="true" Text='<%# Eval("SubCategoryID")%>'/></label>
             <script type="text/javascript">
                 var theLabel = document.getElementById('Label5').eq(0);
                 //If theLabel is alread visible/rendered then other occurences.
                 //hide here
           </script>
   </ItemTemplate>
</asp:DataList>
</div>

渲染的 HTML:

<div id="dvProducts">
    <table id="dnn_ctr434_View_rptCustomers" cellspacing="0" cellpadding="0" style="border-color:Black;border-collapse:collapse;">
        <tbody><tr>
            <td>
            <span id="dnn_ctr434_View_rptCustomers_Label5_0">1</span>


            <div class="wrapping">
                <div id="boxer">
                    <span class="Thumbnail">
                        <div class="photo_box  img_zoom">
                            <a href="http://localhost/top3/TheDetails/ProductID/17">
                                <div class="pic_box">
                                    <img src="/top3/Portals/0/thumbdesktop-wallpaper-high-resolution.png" alt="Mountain View" class="topimage">
                                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                                </div>
                            </a>
                        </div>
                    </span>
                    <br>
                    <span class="ProductID">
                        <span id="dnn_ctr434_View_rptCustomers_ProductID_0">17</span></span>
                    <br>
                    <span class="Name">
                        <span id="dnn_ctr434_View_rptCustomers_Name_0">the big product</span></span>
                </div>
            </div>
            <br>
        </td><td>
            <span id="dnn_ctr434_View_rptCustomers_Label5_1">1</span>


            <div class="wrapping">
                <div id="boxer">
                    <span class="Thumbnail">
                        <div class="photo_box  img_zoom">
                            <a href="http://localhost/top3/TheDetails/ProductID/14">
                                <div class="pic_box">
                                    <img src="/top3/Portals/0/images/images1/thumb10404234_10154364241210080_1593901414874601578_n.png" alt="Mountain View" class="topimage">
                                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                                </div>
                            </a>
                        </div>
                    </span>
                    <br>
                    <span class="ProductID">
                        <span id="dnn_ctr434_View_rptCustomers_ProductID_1">14</span></span>
                    <br>
                    <span class="Name">
                        <span id="dnn_ctr434_View_rptCustomers_Name_1">Test</span></span>
                </div>
            </div>
            <br>
        </td><td>
            <span id="dnn_ctr434_View_rptCustomers_Label5_2">1</span>


            <div class="wrapping">
                <div id="boxer">
                    <span class="Thumbnail">
                        <div class="photo_box  img_zoom">
                            <a href="http://localhost/top3/TheDetails/ProductID/24">
                                <div class="pic_box">
                                    <img src="/top3/Portals/0/Templates/thumb10502496_10154364240805080_26951325019847038_n.png" alt="Mountain View" class="topimage">
                                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                                </div>
                            </a>
                        </div>
                    </span>
                    <br>
                    <span class="ProductID">
                        <span id="dnn_ctr434_View_rptCustomers_ProductID_2">24</span></span>
                    <br>
                    <span class="Name">
                        <span id="dnn_ctr434_View_rptCustomers_Name_2">fasdf</span></span>
                </div>
            </div>
            <br>
        </td>
        </tr>
    </tbody></table>
</div>

Answer 1

首先，id 属性必须是唯一的。如果您需要多个，那么您应该使用 class 来代替。在这种特殊情况下，您也不需要。

将其添加到 script 标记中:

jQuery(function() {
  jQuery('[id*=Label5]').hide().each(function(i){
    if ( !(i % 4)) { $(this).show(); }
  });
});

可以看到on this fiddle .