javascript - 親divが表示されているときにjqueryを使用してdivを切り替える

Question

2 つの子 div を含む同じクラスの親 div タグがいくつかあり、そのうちの 1 つが非表示になっています。一度に表示される親は 1 つだけです。次を表示し、前を非表示にすることで、親を一度に1つずつ移動するボタンがあります。2 番目のボタンは、親の 2 つの子 div が表示されているときに切り替える必要がありますが、最初の親に対してのみ機能し、他の親に対しては機能しません。

<div class="parent"   >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>
<div class="parent" style="display:none"  >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>
<div class="parent"  style="display:none" >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>

親を移動するスクリプト: $(function () {

$(".parent:first").fadeIn(); // show first step

$("#next-step").val('Continue');
$("#back-step").hide().click(function () {
    var $step = $(".parent:visible"); 
    if ($step.prev().hasClass("parent")) { // is there any previous step?
        $step.hide().prev().fadeIn();  // show it and hide current step
    }
});

$("#next-step").click(function () {
    var $step = $(".parent:visible"); 
    if ($step.next().hasClass("parent")) { 
        $step.hide().next().fadeIn();  
        $("#back-step").show();   // recall to show backStep button 
    }
  else { // this is last step, submit form
        //$("#next-step").hide();
        $("form").submit();
    }

});

});

現在表示されている親 div ごとに子を切り替えるボタンのスクリプト

$('.txtFlip').on('click', function(event) {
 $('.parent:visible > #child1').slideToggle();
 $('.parent:visible > #child2').slideToggle();
});

私の問題は、現在表示されている親ごとに child1 と child2 を切り替えるスクリプトです。最初の親に対してのみ機能し、残りの親に対しては機能しません。助けてください...

ありがとう......