Auto increment step number if element is visible

Question

Attempting to auto increment step numbers for a form. Certain elements of the form may hide or show dependent on answers from above.

<div class="confirmation-step">
    <span class="step-number"></span>
</div>
<div class="confirmation-step" style="display:none;">
    <span class="step-number"></span>
</div>
<div class="confirmation-step">
    <span class="step-number"></span>
</div>

$('.confirmation-step').each(function() {
    if($(this).is(':visible')) {
        //set variable stepNum
        //Haven't come up with anything good yet
    } else {}
    $(this).find('.step-number').html(stepNum);
});

<div class="confirmation-step">
    <span class="step-number">1</span>
</div>
<div class="confirmation-step" style="display:none;">
    <span class="step-number"></span>
</div>
<div class="confirmation-step">
    <span class="step-number">2</span>
</div>

Thanks!

Answer 1

How about

$('.confirmation-step:visible .step-number').text(function(i) {return i+1;});

FIDDLE