Osiągnięcie funkcji podobnej do powtarzania ng-repeat w javascript

Question

Im obecnie pracuje nad kodem, aby osiągnąć coś takiego jak ng-repeat w kanciastym. Zasadniczo pętla for w html. kod przyjmuje każdy element z klasą "loop" i przetwarza ją z informacjami podanymi za pomocą atrybutu "info". Oto kod: 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); 
}); 

Teraz mam również funkcję do zastąpienia - zmienna - z numerami.

Wszystko działało idealnie, ale gdy pętle są zagnieżdżone tj

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

nie robi praca na zagnieżdżonych pętli, tj -J- robi się wymienić z numerami. Nie wiem, dlaczego tak się dzieje, każda pomoc jest doceniana.

Answer 1

Wymiana nie powiedzie się, ponieważ HTML został zmieniony, a następne odniesienie, które jQuery zebrał dla twojej pętli , nie reprezentuje już tego, co było wcześniej.

Zamiast dokonać pętla for iść w odwróconym kierunku:

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

Snippet:

$($(".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>