Así que estoy tratando de hacer que un grupo completo de elementos vaya de un lado a otro, a partir de un código que tomé aquí pero lo edité
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divs"> <div class="cls1"> <div>Yes 1 </div> <div>Element 1 </div> </div> <div class="cls2"> <div>Yes 1 </div> <div>Element 1 </div> </div> <div class="cls3"> <div>Yes 1 </div> <div>Element 1 </div> </div> </div> <a id="next">next</a> <a id="prev">prev</a> <script> $(document).ready(function(){ $(".divs div").each(function(e) { if (e != 0) $(this).hide(); }); $("#next").click(function(){ if ($(".divs div:visible").next().length != 0) $(".divs div:visible").next().show().prev().hide(); else { $(".divs div:visible").hide(); $(".divs div:first").show(); } return false; }); $("#prev").click(function(){ if ($(".divs div:visible").prev().length != 0) $(".divs div:visible").prev().show().next().hide(); else { $(".divs div:visible").hide(); $(".divs div:last").show(); } return false; }); }); </script> </html>Cuando hago clic en siguiente, no aparece nada. Y cuando envío correo no deseado, los elementos aleatorios aparecen por separado, ambos elementos aparecen cuando hago clic en siguiente.
si no usó clases, use algo como ".divs>div" para identificar el elemento; de lo contrario, los elementos secundarios se incluirían en la selección.
Son solo mis preferencias, pero si codifica, una línea está bien si el significado es claro, pero para esta parece un desperdicio y no está claro de un vistazo. También es mejor asignar a la variable que buscar varias veces.
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divs"> <div class="item cls1"> <div>Yes 1 </div> <div>Element 1 </div> </div> <div class="item cls2"> <div>Yes 2 </div> <div>Element 2 </div> </div> <div class="item cls3"> <div>Yes 3 </div> <div>Element 3 </div> </div> </div> <a id="next">next</a> <a id="prev">prev</a> <script> $(document).ready(function(){ $(".divs>div").each(function(e) { if (e != 0) $(this).hide(); }); $("#next").click(function(){ const visibleDiv = $(".divs>div:visible"); const nextDiv = visibleDiv.next(); if(nextDiv.length > 0) { visibleDiv.hide(); nextDiv.show(); } }); $("#prev").click(function(){ const visibleDiv = $(".divs>div:visible"); const prevDiv = visibleDiv.prev(); if(prevDiv.length > 0) { visibleDiv.hide(); prevDiv.show(); } }); }); </script> </html>