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

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

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

最后两行是问题所在。这可以很容易地在您的原始或正常情况下解决。您命名的代码：

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个列中排列所需的行数。

Answer 2

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

不能在ejs中循环

2 个答案: