在JavaScript中实现类似Angular ng-repeat的功能

Question

我目前正在编写一个类似于angular中ng-repeat的代码。基本上是在html中使用for循环。 该代码会获取所有带有“loop”类的元素，并使用“info”属性中提供的信息进行处理。以下是代码： HTML

<div class="loop" data-info="i in 1 to 10">
 -i-
</div>

Javascript

$(".loop").each(function(i){
 var loop_info=$(this).attr("data-info");
 var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);
 var variable=fin[1],
 initial=fin[2],
 final=fin[3];
 var htm=$(this).html(),printed="";
 for(j=initial;j<=final;j++){
  var temp=htm;
  var r=new RegExp("-("+variable+")-","g")
  temp=temp.replace(r,j);
  printed+=temp;
 }
 $(this).html(printed);
}); 

现在我还添加了一个功能，可以用数字替换变量“- variable -”。 一切都很完美，但当嵌套循环时，就会出现问题。

<div class="loop" data-info="i in 1 to 10">
 <div class="loop" data-info="j in 1 to 10">
  -j-
 </div>
</div>

它在嵌套循环上不能工作，即-j-不会被数字替换。 我不知道为什么会发生这种情况，任何帮助将不胜感激。

- decatron

---

"info"是无效的属性。不要犯同样的错误，使用"data-info"代替。 - Roko C. Buljan

@Roko 感谢您指出错误，我会立即编辑问题。 - decatron

因此，嵌套循环中的内部循环在一个i中执行j次。 因此，您应该首先检查任何data-info元素是否有其他data-info子元素，并相应地采取行动。 $(this).html（printed）;将销毁第一个.each（）的元素迭代中的子内容。这意味着内部.loop被销毁/替换，并且在此时不可访问DOM缓存。 - Roko C. Buljan

@Roko 那么有没有办法从子级别开始循环，而不是从父级别开始呢？或者有没有办法检查循环的子级或孙级是否包含循环类？ - decatron

Answer 1

替换失败是因为HTML被更改了，而jQuery之前收集的下一个`.loop`引用不再表示以前的内容。相反，让你的`for`循环以相反的方向进行：

$($(".loop").get().reverse()).each(function(i){
    // etc...

代码片段：

$($(".loop").get().reverse()).each(function(i){
  var loop_info=$(this).attr("info");
  var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);
  var variable=fin[1],
      initial=fin[2],
      final=fin[3];
  var htm=$(this).html(),printed="";
  for(j=initial;j<=final;j++){
    var temp=htm;
    var r=new RegExp("-("+variable+")-","g")
    temp=temp.replace(r,j);
    printed+=temp;
  }
  $(this).html(printed);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loop" info="i in 1 to 10">
    <div class="loop" info="j in 1 to 10">
      -i-:-j-
    </div>
</div>

- trincot

---

惊人的简单解决方案 - Roko C. Buljan