anzeigen Kind-Elemente in Mutter von seiner Klasse durch jquery

Question

Ändern Kann sein, ich kann mein Problem in meinem Beitrag Titel nicht ausdrücken, aber hier ist es ..

nehme ich an ein übergeordnetes div-Element haben und nein. von Kindelementen. Alle untergeordneten Elemente sind Anzeige: keine, und ich habe zwei <a> Elemente, die nächste und vorherige Schaltfläche ist. Ich habe die erste untergeordnete Elementklasse aktiviert. Wenn die Seite geladen wird, überprüft jQuery, ob die Sichtbarkeit des ersten Kindes sichtbar ist, dann wird die Zurück-Schaltfläche deaktiviert. Aber meine Frage ist, wenn ich auf Next Button klicke, wie man die Klasse "active" auf die nächste setzt, und wenn es das letzte Kind erreicht, wird die nächste Schaltfläche automatisch ausgeblendet.

<div class="main"> 
    <div class="active">First child</div> 
    <div>Second child</div> 
    <div>Thirdchild</div> 
</div> 

<a href="" id="back">Back</a> 
<a href="" id="next">Next</a> 

Css:

.main{ 
    display: none; 
} 

.main.active{ 
    display: block; 
} 

JQuery:

<script> 
    $('document').ready(function() { 

     if($('.main div').first().hasClass('active')){ 
      $("#back").hide(); 
     } 

     /* Next previous **/ 
     $("#next").click(function(e) { 


     }); 

     $("#back").click(function(e) { 


     }); 

    }); 
</script> 

Answer 1

Versuchen Sie dies für die js. Nur die Funktionen werden angezeigt.

$("#next").click(function(e) { 

     var ind = 0; 

     $('.main div').each(function(){ 
      if($(this).hasClass('active')) 
      { 
       ind = $(this).index()+2; 
      } 
     }); 
     $('.main div').removeClass('active'); 
     $('.main div:nth-child('+ind+')').addClass('active'); 
     $("#back").show(); 
     if($('.main div').last().hasClass('active')){ 
     $("#next").hide(); 
    } 


    }); 

    $("#back").click(function(e) { 
     $("#next").show(); 
     var ind = 0; 

     $('.main div').each(function(){ 
      if($(this).hasClass('active')) 
      { 
       ind = $(this).index(); 

      } 
     }); 
     if(ind==1) 
     $('#back').hide(); 
     $('.main div').removeClass('active'); 
     $('.main div:nth-child('+ind+')').addClass('active'); 
    }); 

Answer 2

Sie können prüfen, ob aktiv nächsten Geschwister hat, wenn ja, dann Klasse entfernen aus vorhandenen und fügen Sie neben. hinzufügen sonst Klasse aktiv erstes div Element in .main div Elemente und umgekehrt Logik geht zur Zurück-Taste:

$(function(){ 
 
$("#next").click(function(e) { 
 
    var activeelement = $('.active'); 
 
    if(activeelement.next().length) 
 
    activeelement.removeClass('active').next().addClass('active'); 
 
    else 
 
    activeelement.removeClass('active').closest('.main').find('> div:first').addClass('active'); 
 
}); 
 

 
$("#back").click(function(e) { 
 
    var activeelement = $('.active'); 
 
    if(activeelement.prev().length) 
 
activeelement.removeClass('active').prev().addClass('active'); 
 
    else 
 
activeelement.removeClass('active').closest('.main').find('> div:last').addClass('active'); 
 
}); 
 
});

.main div{ 
 
    display: none; 
 
} 
 

 
.main .active{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="active">First child</div> 
 
    <div>Second child</div> 
 
    <div>Thirdchild</div> 
 
</div> 
 

 
<a href="#" id="back">Back</a> 
 
<a href="#" id="next">Next</a>

Answer 3

Try this:

$('document').ready(function() { 

    if($('.main div').first().hasClass('active')){ 
     $("#back").hide(); 
    } 

    /* Next previous **/ 
    $("#next").click(function(e) { 
     if($('.main div').hasClass('active)){ 
      $(this).removeClass('active') 
      $(this).next().addClass('active') 

    }); 

    $("#back").click(function(e) { 


    }); 

}); 

Answer 4

Sie mögen diese

tun können

$("#next").click(function(e) { 
$("#back").show(); 
    if (!$(".active").next().length) { 
    $(this).hide() 
    } 
    $(".active").next().addClass("active").prev().removeClass("active"); 
}); 
$("#back").click(function(e) { 
    $("#next").show(); 
    if (!$(".active").prev().length) { 
    $(this).hide() 
    } 
    $(".active").prev().addClass("active").next().removeClass("active"); 
}); 

Fiddle

Holen Sie sich das nächste Element mit .next().