Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nick 95 posts 492 karma points
    Mar 02, 2023 @ 16:16
    Nick
    0

    Adding dynamic ascending class number to a foreach loop

    Hi,

    As you can tell from my recent posts I've been away from Umbraco and I'm a little rusty. I'm building Block list element which has repeatable content see code below, foreach looping product card I would like to add an ascending dynamic number for example features-1, would add another features-2, features-3 ... for each additional item added.

    How can I add this in programatically?

     <div class="features-item-wrap">
                  <!-- Features Item Box Start -->
                   @foreach (var item in content.ProductsList)
                    {
                        var card = (ProductsGridCard)item.Content;
    
                        <div class="features-item-box features-box-1">
                            <div class="features-item features-1">
                              <div class="features-icon">
                                <img src="@card.ProductListsImage.Url()" alt="" />
                              </div>
                              <div class="features-content">
                                    <h3 class="title">@card.ProductCardHeading</h3>
                                    <p>@card.ProductCardSummary</p>
                              </div>
                            </div>
                      </div>
    
                    }
                  <!-- Features Item Box End -->
                </div>
    

    Kind Regards

    Nick

  • Nick 95 posts 492 karma points
    Mar 03, 2023 @ 13:26
    Nick
    101

    Manged to figure it out in the end, if anybody needs the solution I'll post the code below:

     @{int i = 0;}
                    @foreach (var item in content.ProductsList)
                    {
                        var card = (ProductsGridCard)item.Content;
    
                        <div class="features-item-box features-box-@i">
                            <div class="features-item features-@i">
                              <div class="features-icon">
                                <img src="@card.ProductListsImage.Url()" alt="" />
                              </div>
                              <div class="features-content">
                                    <h3 class="title">@card.ProductCardHeading</h3>
                                    <p>@card.ProductCardSummary</p>
                              </div>
                            </div>
                      </div>
                        i++;
                    }
    
Please Sign in or register to post replies

Write your reply to:

Draft