достижение угловой функции ng-repeat like в javascript
Im в настоящее время работает над кодом для достижения чего-то вроде ng-repeat в angular. В основном for-loop в html. код берет каждый элемент с классом " 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);
});
Теперь я также включил функцию для замены-переменной-числами.
все работало отлично, но когда петли вложены я.е
<div class="loop" data-info="i in 1 to 10">
<div class="loop" data-info="j in 1 to 10">
-j-
</div>
</div>
он не работает на вложенном цикле ,i.e-j-не заменяется цифрами. Я не знаю, почему это происходит ,любая помощь приветствуется.
1 ответов
замена не удается, потому что HTML изменяется, и следующий .loop
ссылка, которую 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],
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>