Im currently working on a code to achieve something like ng-repeat in angular. Basically a for-loop in html. the code takes every element with the class "loop" and processes it with the information given through the "info" attribute. Here is the code : 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);
}); 

Now i have also included the feature to replace the - variable - with the numbers.

Everything worked perfectly but when the loops are nested i.e

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

it doesnt work on the nested loop ,i.e -j- doesnt get replaced with the numbers. I dont know why this is happening ,any help is appreciated.

Im currently working on a code to achieve something like ng-repeat in angular. Basically a for-loop in html. the code takes every element with the class "loop" and processes it with the information given through the "info" attribute. Here is the code : 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);
}); 

Now i have also included the feature to replace the - variable - with the numbers.

Everything worked perfectly but when the loops are nested i.e

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

it doesnt work on the nested loop ,i.e -j- doesnt get replaced with the numbers. I dont know why this is happening ,any help is appreciated.

• javascript
• jquery
• angularjs-ng-repeat

• info is an invalid attribute. Don't follow the same mistakes, use data-info instead. – Roko C. Buljan Commented Jul 17, 2016 at 13:55
• @Roko thanks for pointing out the mistake i will edit the question rightaway – decatron Commented Jul 17, 2016 at 13:57
• So, nested loops, the inner one operates j times in one i. So basically you should first check if any data-info element has other data-info children and act accordingly. $(this).html(printed); will destroy the child contents at the first .each()'s element iteration. Means the inner .loop is destroyed/replaced and not accessible in the DOM cache at this point. – Roko C. Buljan Commented Jul 17, 2016 at 14:05
• @Roko so is there a way to start the loop from child instead of the parent? or is there a way to check the child or grandchild of loop if it contains the loop class? – decatron Commented Jul 17, 2016 at 14:09

1 Answer 1

The replacement fails because the HTML is changed, and the next .loop reference that jQuery had collected for your for loop, no longer represents what it was before.

Instead, make your for loop go in reversed direction:

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