Question

可能重复：
change repeater li item class if first or last

我在.net网站上工作，我之前从未与之合作过。

我有以下输出4个div ...

<asp:Repeater ID="RT_Ranges" runat="server">
    <ItemTemplate>
        <div class="item">
            <h4>
                <%# Eval("Category_Name")%></h4>
            <asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
            <p>
                <%# Eval("des") %></p>
            <asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
        </div>
    </ItemTemplate>
</asp:Repeater>

我想在上面输出的最后一个DIV中添加一个类，这是可能的，如果是这样，我该怎么做？

Answer 1

您的回答是here

使它像：

<asp:Repeater ID="RT_Ranges" runat="server">
    <ItemTemplate>
        <div class="<%# GetItemClass(Container.ItemIndex) %>">
            <h4>
                <%# Eval("Category_Name")%></h4>
            <asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
            <p>
                <%# Eval("des") %></p>
            <asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
        </div>
    </ItemTemplate>
</asp:Repeater>

以及您的代码隐藏：

protected string GetItemClass(int itemIndex)
{
if (itemIndex == this.ItemCount - 1)
        return "CSS_for_last_item";

}

Answer 2

您可以在服务器上执行此操作：

或在客户端：

使用纯CSS（参见:last-child selector）
使用脚本（请参阅jQuery :last-child selector）

Answer 3

你不能这样做。至少这不容易。

如果出于样式原因需要这个类，那么请使用:last-child伪类，如果你需要在javascript中使用它，那么还有其他方法可以获得最后一个孩子。

Answer 4

您可以使用Panel代替（呈现为div）。然后，您可以使用此代码获取最后一项并找到面板：

RepeaterItem lastRepeaterItem = RT_Ranges.Items[RT_Ranges.Items.Count - 1];
Panel lastPanel = (Panel)lastRepeaterItem.FindControl("PanelID");
lastPanel.CssClass = "yourclass";

Answer 5

<asp:Repeater ID="RT_Ranges" runat="server">
    <ItemTemplate>
        <div <%# (Container.DataItemIndex != 0 && (Container.DataItemIndex+1) % 4 == 0) ? @"class='myClass'" : @"class='item'" %>>
            <h4>
                <%# Eval("Category_Name")%></h4>
            <asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
            <p>
                <%# Eval("des") %></p>
            <asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
        </div>
    </ItemTemplate>
</asp:Repeater>

或者使用jQuery：

$("table.RT_Ranges div:last").attr("class", "last");

Answer 6

更改类属性值，如下所示，

        <div class="<%# GetItemClass(Container.ItemIndex) %>">

在代码behid中创建GetItemClass方法，

protected string GetItemClass(int itemIndex)
{
    if (itemIndex == this.ItemCount - 1)
        return "last";
    else
        return "other";
}

另请参阅 Change repeater li item class if first or last

将类添加到最后一项

6 个答案: