jquery - achieving angular ng-repeat like feature in javascript - Stack Overflow

admin管理员组

文章数量:1335099

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

Share Improve this question Follow edited Jul 17, 2016 at 13:58 decatron asked Jul 17, 2016 at 13:50 decatrondecatron 12211 silver badge1010 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： jqueryachieving angular ngrepeat like feature in javascriptStack Overflow