当显示循环的最后一个元素，展现另一种元素循环

Question

之外我有内部下面一个PHP foreach循环：

<div class="form-row">...</div> 

这可以创建form-row div的无限量。我有下一个/后退按钮，一次只显示一个，所以你可以前后移动。

以外的是我有这个按钮：

<button class="test"></button> 

我想要做的东西像下面这样：

$('.form-row:last'){   
    $('button.test').show(); 
} 

例如，当它的form-row div的最后一个元素，我希望它显示按钮。

我该怎么做？

如果是在form-row循环，那么我只会使用$('button.test').last().show();，但因为它超出了这个范围，所以我不知道该怎么做。

这是我的全码：

    <?php global $current_user; 
        get_currentuserinfo(); 
        $user = $current_user->user_login; ?> 
        <form class="form" method="POST" action="<?php bloginfo('stylesheet_directory'); ?>/training-insert.php"> 
         <input type="hidden" value="<?php echo $user; ?>" name="test-user" /> 
         <input type="hidden" value="<?php echo the_title(); ?>" name="test-name" /> 
         <?php $counter = 1; if(get_field('step_by_step_training')): ?> 
         <?php while(the_repeater_field('step_by_step_training')): ?>  
          <div class="form-row"> 
           <h2 style="float:left;margin-left:7px;"> 
           <?php the_title(); ?> 
           </h2> 
           <h2 style="float:right;"><?php echo $counter; ?> of <?php echo $total; ?></h2> 
           <div class="clear"></div> 
           <div id="module-area" style="margin-top:0px!IMPORTANT;"> 
           <div id="modules-top"></div> 
           <div id="modules-repeat"> 
            <p class="training"><?php echo the_sub_field('introduction'); ?></p> 
            <?php if(get_sub_field('training_images')): ?> 
            <?php while(has_sub_field('training_images')): ?> 
            <img class="training" src="<?php echo the_sub_field('image'); ?>" /> 
            <?php endwhile; ?> 
            <?php endif; ?> 
            <p class="training"><?php echo the_sub_field('conclusion'); ?></p> 
            <div class="inner"></div> 
            <button class="next"></button> 
            <button class="end"></button> 
            <div class="clear"></div> 
           </div> 
           <div style="margin-bottom:5px;" id="modules-bottom"></div> 
           </div> 
          </div> 
         <?php $counter++; endwhile; ?> 
         <?php endif; ?> 
        </form> 
        <?php if (get_field('test') != "") { ?> 
         <form class="form" method="POST" action="<?php bloginfo('stylesheet_directory'); ?>/training-insert-alt.php"> 
          <input type="hidden" value="<?php echo $user; ?>" name="test-user" /> 
          <input type="hidden" value="<?php echo the_title(); ?>" name="test-name" /> 
          <input type="hidden" value="<?php echo the_field('test'); ?>" name="test-link" /> 
          <button class="test"></button> 
         </form> 
        <?php } ?> 

      <div class="clear"></div> 
      </div> 
     </div> 

    <?php endwhile; endif; ?> 
    </div> 

<?php get_footer(); ?> 

<script type="text/javascript"> 
jQuery(function($) { 
$(document).ready(function() {  

    // prepend a 'previous' button to all form-rows except the first 
    $('<button>').addClass('previous').appendTo($('.inner').not(':first')); 

    // hide all form-rows, but not the first one 
    $('.form-row').not(':first').hide(); 

    // hide on last step 
    $('button.next').last().hide(); 
    $('button.end').last().show(); 

if($('.form-row:last').is(':visible')) { 
    $('button.test').show(); 
} 

    // add the submit button to the last form-row 
    // $('<input>').addClass('submit').prop('type', 'submit').val('My Dashboard').appendTo($('.form-row:last')); 


    // handle the previous button, we need to use 'on' here as the 
    // previous buttons don't exist in the dom at page load 
    $('.form-row').on('click', 'button.previous', function(e) { 
     e.preventDefault(); 
     $(this).parents('div.form-row').hide().prev('div.form-row').show(); 
    }); 

    $('button.next').click(function(e) { 
     // prevent the next buttons from submitting the form 
     e.preventDefault(); 
     // hide this form-row, and show the next one 
     $(this).parents('div.form-row').hide().next('div.form-row').show(); 
    });  

}); 
}); 
</script> 

Answer 1

我把它用这个工作：

$('.form-row').last().append($('button.test').show()); 

Answer 2

if($('.form-row:last').is(':visible')) { 
    $('button.test').show(); 
} 

包裹在一个函数并调用它每次你展示你的下一行。或者直接包括它您展示下一行的一部分：

$('button.next').click(function(e) { 
    // prevent the next buttons from submitting the form 
    e.preventDefault(); 
    // hide this form-row, and show the next one 
    $(this).parents('div.form-row').hide().next('div.form-row').show(); 

    if($('.form-row:last').is(':visible')) 
     $('button.test').show(); 
}); 

如果你想，当你按下前面的按钮隐藏按钮：

$('.form-row').on('click', 'button.previous', function(e) { 
    e.preventDefault(); 
    $(this).parents('div.form-row').hide().prev('div.form-row').show(); 
    $('button.test').hide(); 
});