Question

我有一个模板，我需要渲染html。我正在使用EJS（基本上是带有javascript的HTML）。

我需要在每三次迭代后插入一个新的行div和一个包装div，并将接下来的三次迭代嵌套在其中，然后在开始之后开始超过3次迭代。我觉得这是一种在Ruby中轻松实现这一目标的方法，但我不知道在JS中。我怎么能这样做？

代码示例：

<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>

或

<% 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>              
<% }); %>

Answer 1

你可以考虑for的迭代器，如果它可以被3整除则创建一个条件。如果是，则渲染，否则（...）。

if（it％3 == 0）{

render()

}其他{

(...)

}

希望它有所帮助。

循环：每三次迭代添加html

1 个答案: