1

現在、交互の CSS タグを持つ 4 つのスパンがあります。

<% var index =0 ; %>
    <% foreach (var item in Model.Take(4))  {
                    var css = (index%2==0)?"even":"odd";
    %>
        <span class="featured-products <%= css %>">
        <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%></a>
        <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= item.ProductName%></a>
        </span>
    <%
    index ++ ;
    } %>

しかし、最後のスパンに追加の CSS タグ「last」を含める必要があります。いくつかの異なる方法を試しましたが、すべて失敗しました。何か助けはありますか？ありがとう。

4

2 に答える 2

2

:last-child CSS セレクターを使用してみましたか? CSS で目的を達成できる場合は、マークアップを追加する必要はないかもしれません。

于 2012-05-04T19:21:56.347 に答える
1

CSSを使いたくない場合。

<% var index = 0; %>
<% var items = Model.Take(4); %>
<% foreach (var item in items)  {
                var css = (index%2==0)?"":"odd";
                if(index == items.Count - 1)
                {
                   css = " last";
                }
%>
    <span class="featured-products <%= css %>">
    <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%></a>
    <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= item.ProductName%></a>
    </span>
<%
index ++ ;
} %>

また、このコードをクリーンアップすることをお勧めします。<%どこにでも置く必要はありません%>。

更新：あなたがしていることを書くための少しきれいな方法。間違いなく最もきれいではありませんが、良いスタートです。

<%
    var index = 0;
    var items = Model.Take(4);

    foreach (var item in items)  {
        var css = (index%2==0)?"":"odd";
        if(index == items.Count - 1)
        {
            css = " last";
        }

        %>
        <span class="featured-products <%= css %>">
        <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%></a>
        <a href="<%= Url.Action("View", "Products", new {id = item.SKU}) %>"><%= item.ProductName%></a>
        </span>
        <%
        index ++ ;
    }
%>
于 2012-05-04T19:25:10.410 に答える