Me gustaría eliminar el grupo de div. Toda la clase de etiqueta div = "mt1" puedo eliminar el primer elemento. Pero me gustaría hacerlo todo con 5 segundos de retraso.
Código HTML:
<div class="mgroup">
<div class="mt1">Text 1</div> // wait 5 second and delete
<div class="mt1">Text 2</div> // wait 5 second and delete
<div class="mt1">Text 3</div> // wait 5 second and delete
<div class="mt1">Text 4</div> // wait 5 second and delete
<div class="mt1">Text 5</div> // wait 5 second and delete
</div>
Mi código JS:
var div = $('.mt1');
if(div.lenght >0)
{
var parent = div.first();
parent.fadeOut("fast", function(){ parent.remove(); } );
}
Mi código elimina el primer elemento de div. Quiero que se repita cada 5 segundos. ¿Cualquier sugerencia?
3 respuestas
Una opción es tener una función recursiva que tome el índice del elemento para desvanecerse, y lo desvanece si existe, volviéndose a llamar con el siguiente i
. Use div.eq(i)
para seleccionar el i
th niño:
const fadeOutNext = (i) => {
var div = $('.mt1');
if (!div[i]) {
return;
}
div.eq(i).fadeOut("fast", function() {
setTimeout(fadeOutNext, 5000, i + 1);
});
};
fadeOutNext(0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
<div class="mt1">Text 1</div> // wait 5 second and delete
<div class="mt1">Text 2</div> // wait 5 second and delete
<div class="mt1">Text 3</div> // wait 5 second and delete
<div class="mt1">Text 4</div> // wait 5 second and delete
<div class="mt1">Text 5</div> // wait 5 second and delete
</div>
Si los elementos ya no necesitan existir en el DOM después de desvanecerse, puede .remove()
hacer el código más agradable:
const fadeOutNext = () => {
var div = $('.mt1');
if (!div.length) {
return;
}
div.eq(0).fadeOut("fast", function() {
$(this).remove();
setTimeout(fadeOutNext, 5000);
});
};
fadeOutNext();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
<div class="mt1">Text 1</div> // wait 5 second and delete
<div class="mt1">Text 2</div> // wait 5 second and delete
<div class="mt1">Text 3</div> // wait 5 second and delete
<div class="mt1">Text 4</div> // wait 5 second and delete
<div class="mt1">Text 5</div> // wait 5 second and delete
</div>
Suena como un trabajo para setInterval:
var interval = setInterval(function(){
var div = $('.mt1').first()
div[0] ? div.fadeOut("fast", function(){ div.remove() } ) : clearInterval(interval)
}, 5000)
Puedes probar esto:
let child = 0;
setInterval(()=>{
const c = $('.mt1:nth-child('+child+')');
c.fadeOut("fast", function(){ c.remove(); } );
child++;
},5000);
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.