Looping: adding html every three iterations

Question

I have a template I need to render html in. I'm using EJS (basically HTML with javascript).

I need to insert a new row div and a wrapper div after every three iterations and nest the next three iterations inside that, and then start that over 3 iterations after it begun. I feel like theres a way to do this easily in Ruby, but I have no idea in JS. How could I do this?

Code example:

<div class="row">
                            <div class="wrapper">
                                <div class="col-lg-4 col-xl-4 col-md-4">
                                    <div class="news-card">
                                        <img src="http://placehold.it/200x75" alt="It yo"/>
                                        <h1>Loem ipsum mailto palo</h1>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <a style="margin-top:2rem;" href="#">Read More</a>
                                    </div>
                                </div><div class="col-lg-4 col-xl-4 col-md-4">
                                    <div class="news-card">
                                        <img src="http://placehold.it/200x75" alt="It yo"/>
                                        <h1>Loem ipsum mailto palo</h1>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <a style="margin-top:2rem;" href="#">Read More</a>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-xl-4 col-md-4">
                                    <div class="news-card">
                                        <img src="http://placehold.it/200x75" alt="It yo"/>
                                        <h1>Loem ipsum mailto palo</h1>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <a style="margin-top:2rem;" href="#">Read More</a>
                                    </div>
                                </div>
                            </div>
                            </div>

            <div class="row">
                <div class="wrapper">
                    <div class="col-lg-4 col-xl-4 col-md-4">
                        <div class="news-card">
                            <img src="http://placehold.it/200x75" alt="It yo"/>
                            <h1>Loem ipsum mailto palo</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <a style="margin-top:2rem;" href="#">Read More</a>
                        </div>
                    </div><div class="col-lg-4 col-xl-4 col-md-4">
                        <div class="news-card">
                            <img src="http://placehold.it/200x75" alt="It yo"/>
                            <h1>Loem ipsum mailto palo</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <a style="margin-top:2rem;" href="#">Read More</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xl-4 col-md-4">
                        <div class="news-card">
                            <img src="http://placehold.it/200x75" alt="It yo"/>
                            <h1>Loem ipsum mailto palo</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <a style="margin-top:2rem;" href="#">Read More</a>
                        </div>
                    </div>
                </div>
                </div>

Or

<% data.articles.forEach(function(article) {%>
    **every three times $('.container').html(<div class="row">) ***
        <div class="col-lg-4 col-xl-4 col-md-4">
                        <div class="news-card">
                            <img src="http://placehold.it/200x75" alt="It yo"/>
                            <h1>Loem ipsum mailto palo</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <a style="margin-top:2rem;" href="#">Read More</a>
                        </div>
                    </div>              
<% }); %>

This is basically the same as http://stackoverflow.com/q/13144927/215552; you just need to include the `index` parameter in the function passed to `forEach`. — Heretic Monkey, Apr 10 '17 at 19:45

score 0 · Accepted Answer · answered Apr 10 '17 at 20:12

0

You can take account of the for's iterator and make a condition if its divisible by 3. If it is, then you render, otherwise (...).

if(it % 3 == 0){

render()

} else {

(...)

}

Hope it helps.

answered Apr 10 '17 at 20:12

Aldodzb

106
1
3

Looping: adding html every three iterations

1 Answers1