2

tengo una duda con jquery que no puedo resolver.

Tengo una lista (ul) con 5 elementos (li) lo que quiero es seleccionar sus hijos uno por uno y realizar lo siguiente.

  1. Agregarle o togglear una clase.
  2. Agregar un delay.
  3. Agregar / togglear otra clase (para que aparezca y desaparezca).
  4. Seleccionar el siguiente elemento para aplicarle los mismos efectos que al anterior.
  5. Hacer de esto un loop.

tengo entendido que con el selector child puedo hacerlo pero no entiendo bien como, serian de gran ayuda si me despejan esta duda.

esto es lo que tengo:

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

    $('.listado li').addClass('animated fadeinDown');

            setTimeout(function () {
              $(".listado li").addClass("fadeoutDown");

              }, 1000);
              
              }) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="listado">
              <li id="sub1" class="">texto numero 1</li>
              <li id="sub2" class="">texto numero 2</li>
              <li id="sub3" class="">texto numero 3</li>
              <li id="sub4" class="">texto numero 4</li>
              <li id="sub5" class="">texto numero 5</li>
            </ul>

1 respuesta 1

3

Puedes utilizar .each() de jquery para realizar un loop por cada uno de los elementos encontrados por el selector y después acceder a cada elemento en concreto con $(this)

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

$(".listado li").each(function(){
    $(this).addClass('animated fadeinDown');

        setTimeout(function () {
          $(this).addClass("fadeoutDown");

          }, 1000);
})

          
          }) 
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="listado">
              <li id="sub1" class="">texto numero 1</li>
              <li id="sub2" class="">texto numero 2</li>
              <li id="sub3" class="">texto numero 3</li>
              <li id="sub4" class="">texto numero 4</li>
              <li id="sub5" class="">texto numero 5</li>
            </ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.