Copied to clipboard

Flag this post as spam?

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


  • Nick 97 posts 514 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 97 posts 514 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++;
                    }
    
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies