循环：每三次迭代添加 html

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 整除时创建一个条件。如果是，则渲染，否则 (...)。

如果（它 % 3 == 0）{

render()

} 否则 {

(...)

}

希望对你有帮助。