locked
How to list 3 items in each row? RRS feed

  • Question

  • User-735851359 posted

    Hello,

    After each 3 items, the 'row-fluid' class must be active. How can I do that? I tried the following but it is not correct:

            @for(int i=0;i<info.Count;i++){
                if(i%3==0){
                    <div class="row-fluid">
                }
                        <div class="span4 product-block ">
                               ...                 
                        </div>
                    
                if(i%3==0){
                    </div>
                }
            }

    Tuesday, June 2, 2015 3:42 PM

Answers

  • User1853794821 posted

    OK

    Try

    <div class=@(i%3==0?"row-fluid":"")>
                        <div class="span4 product-block ">
     
                        </div>
                    </div>  

    For each item in your set of items, if the row index (i) is 0 or evenly divisible by 3, the outer div will get the row-fluid class, otherwise, it will get an empty class.  All items will get the other two classes.  This is assuming that you are using the variable i to index an array of data.  I cannot tell since you have not shown me the entire code context of your page.

    Normally when I do stuff like this, I do a loop through an Ienumerable and increment a counting variable for decisions about what to do with formating.  For example:

    var i=0;
    foreach(var item in itemsList)
    {
       <div class=@"(i++%3==0?"some-class":"")">
          <div class="some-other-class(es)">
             @*do something to each item*@
          </div>
       </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 2, 2015 6:03 PM
  • User281315223 posted

    ayanmesut

    I tried but not working.

    http://www.ftssogutma.com/isi-degistiriciler

    Have a look at this page. In each row there are 3 elements. The Next element must start from new row.

    I suppose I had originally misunderstood what you were trying to do, or it was simply unclear. Anyways, the follow should do what you need. It uses a 1-based index to loop through instead of a 0 (so that the modulo works a bit differently) and every 4th element will trigger a new row and it will be closed on the third element (or the last one) :

    <!-- Loop through each item -->
    @for(int i = 1; i =< info.Count;i++){
        <!-- If it's the starting row or a third row, start your section -->
        if(i % 3 == 1){
            <div class="row-fluid">
        }
    
        <!-- Output accordingly -->
        <div class="span4 product-block">...</div>     
         
        <!-- Close the block if necessary (e.g. last element or ending a block) -->      
        if(i % 3 == 0 || i == info.Count){
            </div>
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 2, 2015 6:48 PM

All replies

  • User281315223 posted

    Do you want each third row to be active or something similar? Do you have an example of what the output that you are looking for? It might make it a bit easier to figure out exactly what you need to do :

    <!-- Loop through each item -->
    @for(int i=0;i<info.Count;i++){
        <!-- If it is the third row, wrap it within a row-fluid block -->
        if(i%3==0){
            <div class="row-fluid">
        }
        <div class="span4 product-block ">...</div>     
        <!-- Close the block if necessary -->      
        if(i%3==0){
            </div>
        }
    }

    Or if you wanted to output a row for each one and then only set the third ones as active :

    <!-- Loop through each item -->
    @for(int i=0;i<info.Count;i++){
        <!-- If it is the third row, wrap it within a row-fluid block -->
        <div class="row-fluid @(i % 3 == 0 ? "active" : "")">
            <div class="span4 product-block ">...</div>     
        </div>
    }

    Tuesday, June 2, 2015 4:08 PM
  • User1853794821 posted
           @for(int i=0;i<info.Count;i++){
                <div class<div class="@("span4 product-block" + (i%3 == 0 ? " row-fluid" : ""))">
                               ...                 
                </div>
            }

    This will make every third row have all three classes (span4, product-block, and row-fluid), the other rows have just the two classes (span4 and product-block)

    Tuesday, June 2, 2015 4:13 PM
  • User-735851359 posted

    Hi Rion,

    This part is not working:

        if(i%3==0){
            </div>
        }

    The div with row-fluid must run for each the 3rd element.

    Tuesday, June 2, 2015 4:50 PM
  • User-735851359 posted

    Hi rrrsr7205,

    I need to make seperate div with row-fluid for each 3rd element.

    Tuesday, June 2, 2015 4:51 PM
  • User1853794821 posted

    Do you mean every third row has just row-fluid and the others have just span4 and product-block)?

    in that case, 

    <div class<div class="@((i%3 == 0 ? " row-fluid " : "span4 product-block"))"

     

    Tuesday, June 2, 2015 5:06 PM
  • User-735851359 posted
    <div class="span4 product-block ">

    This is for all.

    but the following is only for each 3rd element.

    <div class="row-fluid">
    

    My problem is the div with span is inside the div with row-fluid as follows:

                    <div class="row-fluid">
                        <div class="span4 product-block ">
     
                        </div>
                    </div>  

    Tuesday, June 2, 2015 5:21 PM
  • User1853794821 posted

    Did you try the one I just gave you.  I must not understand your total requirement

    Tuesday, June 2, 2015 5:24 PM
  • User-735851359 posted

    I tried but not working.

    http://www.ftssogutma.com/isi-degistiriciler

    Have a look at this page. In each row there are 3 elements. The Next element must start from new row.

    Tuesday, June 2, 2015 5:29 PM
  • User1853794821 posted

    OK

    Try

    <div class=@(i%3==0?"row-fluid":"")>
                        <div class="span4 product-block ">
     
                        </div>
                    </div>  

    For each item in your set of items, if the row index (i) is 0 or evenly divisible by 3, the outer div will get the row-fluid class, otherwise, it will get an empty class.  All items will get the other two classes.  This is assuming that you are using the variable i to index an array of data.  I cannot tell since you have not shown me the entire code context of your page.

    Normally when I do stuff like this, I do a loop through an Ienumerable and increment a counting variable for decisions about what to do with formating.  For example:

    var i=0;
    foreach(var item in itemsList)
    {
       <div class=@"(i++%3==0?"some-class":"")">
          <div class="some-other-class(es)">
             @*do something to each item*@
          </div>
       </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 2, 2015 6:03 PM
  • User281315223 posted

    ayanmesut

    I tried but not working.

    http://www.ftssogutma.com/isi-degistiriciler

    Have a look at this page. In each row there are 3 elements. The Next element must start from new row.

    I suppose I had originally misunderstood what you were trying to do, or it was simply unclear. Anyways, the follow should do what you need. It uses a 1-based index to loop through instead of a 0 (so that the modulo works a bit differently) and every 4th element will trigger a new row and it will be closed on the third element (or the last one) :

    <!-- Loop through each item -->
    @for(int i = 1; i =< info.Count;i++){
        <!-- If it's the starting row or a third row, start your section -->
        if(i % 3 == 1){
            <div class="row-fluid">
        }
    
        <!-- Output accordingly -->
        <div class="span4 product-block">...</div>     
         
        <!-- Close the block if necessary (e.g. last element or ending a block) -->      
        if(i % 3 == 0 || i == info.Count){
            </div>
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 2, 2015 6:48 PM