我目前正在研究一种代码来实现像角度的ng-repeat.基本上是html中的for循环.
代码使用类“循环”获取每个元素,并使用通过“info”属性给出的信息对其进行处理.这是代码：
HTML
代码使用类“循环”获取每个元素,并使用通过“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);
});
一切都很完美但是当循环嵌套时,即
<div class="loop" data-info="i in 1 to 10"> <div class="loop" data-info="j in 1 to 10"> -j- </div> </div>
它不适用于嵌套循环,即-j-不会被数字取代.
我不知道为什么会这样,任何帮助都表示赞赏.
解决方法
替换失败是因为HTML已更改,并且jQuery为for循环收集的下一个.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],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>
