Home › Forums › Add-ons › Repeater Field › get_row_index() not returning to script in loop
I’m trying to run a JS function for each repeater row. To do this, I figured I’d use et_row_index() to target each row. The function uses GSAP to animate a counter based on values input via ACF. My problem is the first loops row index (1) is repeated for each row even though each row is printing the row index properly and appending the correct element’s ID.
This is my code:
<?php if( have_rows('counters') ):?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<ul id="counter-wrap">
<?php while ( have_rows('counters') ) : the_row();?>
<li class="single_counter" id="single-number-wrap-<?php echo get_row_index(); ?>">
<?php if( have_rows('single_counter') ):?>
<?php while ( have_rows('single_counter') ) : the_row();?>
<?php if(get_sub_field('prepend')):?>
<span><?php the_sub_field('prepend');?></span>
<?php endif;?>
<span id="single-number-<?php echo get_row_index(); ?>"><?php the_sub_field('starting_number');?></span>
<?php if(get_sub_field('append')):?>
<span><?php the_sub_field('append');?></span>
<?php endif;?>
<div><?php the_sub_field('label');?></div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:'<?php the_sub_field('starting_number');?>'} , NewVal = '<?php the_sub_field('ending_number');?>' ;
var counter = $('#single-number-<?php echo get_row_index(); ?>')
TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
<?php endwhile;?>
<?php endif;?>
</li>
<?php endwhile;?>
</ul>
<?php endif;?>
And this is what is outputs:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js”></script>
<ul id=”counter-wrap”>
<li class=”single_counter” id=”single-number-wrap-1″>
<span id=”single-number-1″>100</span>
<span>M</span>
<div>Likes and comments on instagram alone</div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:’100′} , NewVal = ‘300’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
<li class=”single_counter” id=”single-number-wrap-2″>
<span id=”single-number-1″>0</span>
<span>M</span>
<div>Press Coverage Impressions</div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:’0′} , NewVal = ‘9’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
<li class=”single_counter” id=”single-number-wrap-3″>
<span id=”single-number-1″>0</span>
<span>K</span>
<div>Attendees</div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:’0′} , NewVal = ‘4.5’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
<li class=”single_counter” id=”single-number-wrap-4″>
<span id=”single-number-1″>1000000</span>
<div>Beers Distributed During Events</div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:’1000000′} , NewVal = ‘1389283’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
<li class=”single_counter” id=”single-number-wrap-5″>
<span>$</span>
<span id=”single-number-1″>1000</span>
<div>Paper Count</div>
<script>
jQuery( document ).ready(function($) {
var Cont={val:’1000′} , NewVal = ‘2000’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>
The topic ‘get_row_index() not returning to script in loop’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.