不能在ejs中循环

Question

我试图在 ejs 模板中循环，但意外地不断收到这些错误

正常javascript

var three = 3;

for(var i = 0; i < 10; i+= 3) {
    console.log("i is " + i);
    for (var j = i; j < three; j++) {
        console.log("j is " + j);
    }
    three += 3;
}

在 javascript 中它工作得很好。

问题出在ejs中，我试了两个版本，都不能用

第一次尝试

<% var three = 3;
    for(var i=0; i < jobs.length; i+=3)  { %>

    <div class="row stylish-panel">

      <% for (var j = i; j < three; j++) { %>

      <div class="col-md-4">
      <h4><%= jobs[j].title %></h4>

        <div>
          <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
        </div>
      </div>
      <% } three += 3;%>
      </div>
    <% } %>

第二次尝试

<% for(var i=0, three=3; i < jobs.length; i+=3, three+=3)  { %>

    <div class="row stylish-panel">

      <% for (var j = i; j < three; j++) { %>

      <div class="col-md-4">
        <h4><%= jobs[j].title %></h4>
        <div>
          <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
        </div>
      </div>
      <% } %>
      </div>
    <% } %>

它一直提示 Cannot read property 'title' of undefined，但是如果我将 j < three 更改为 j < 10，它就可以正常工作

Answer 1

您正在尝试访问超出上限的 "jobs" 索引位置。注意，您只检查 "i" 是否小于 jobs.length。由于 "three" 从 3 开始（并且像 "i" 一样递增），三（因此 j）变得大于 jobs.length!

Answer 2

在您的原始代码中，j 也超出了 10 的范围。在输出的最后 4 行中，您得到：

i is 9
j is 9
j is 10
j is 11

最后两行是问题所在。这可以在您的原始代码或您命名的 'normal' 代码中轻松解决：

var three = 3;

for (var i = 0; i < 10; i += 3) {
    console.log("i is " + i);
    for (var j = i; j < three && j < 10; j++) {
        console.log("j is " + j);
    }
    three += 3;
}

请注意，我添加了 && j < 10。在第二次尝试中重做，变成：

for (var i = 0, three = 3; i < 10; i += 3, three += 3) {
    console.log("i is " + i);
    for (var j = i; j < three && j < 10; j++) {
        console.log("j is " + j);
    }
}

但进一步检查发现甚至不需要变量 three，您可以使用它：

for (var i = 0; i < 10; i += 3) {
    console.log("i is " + i);
    for (var j = i; j < i + 3 && j < 10; j++) {
        console.log("j is " + j);
    }
}

还是一样。然后尝试将其返回到您的最终代码中：

<% for (var i = 0; i < jobs.length; i += 3)  { %>
  <div class="row stylish-panel">
  <% for (var j = i; j < i + 3 && j < jobs.length; j++) { %>
    <div class="col-md-4">
      <h4><%= jobs[j].title %></h4>
      <div>
        <img
          src="http://lorempixel.com/200/200/abstract/1/"
          alt="Texto Alternativo"
          class="img-circle ing-thumbnail"
          />
      </div>
    </div>
  <% } %>
  </div>
<% } %>

显然，您有一个解决方案，可以将内容排列成 3 列，以适应所需的行数。

不能在ejs中循环

can't for loop in ejs

javascript

ejs

node.js