J’ai un tableau qui contient des éléments de ma page.
Maintenant, j’ai besoin d’une fonction qui lit le tableau et ajoute une classe en bold
à chaque élément. Le problème est qu’une fois la classe ajoutée, il faut un peu de temps. Ensuite, l’ bold
doit être supprimé et doit être appliqué à l’élément suivant, ce qui entraîne un mouvement “d’onde”.
J’ai essayé de le faire comme ça:
$.each(tdArr, function(i, v) { v.addClass("bold"); setTimeout(function(){ v.removeClass("bold"); }, 900) })
Le problème avec ce code est que le bold
est ajouté à tous les éléments à la fois et est supprimé 900 ms plus tard, à nouveau de tous les éléments en même temps.
Que dois-je faire pour append un délai entre les différentes actions?
Je pense que vous devez aborder cette question légèrement différemment, car setTimout
retour immédiat de setTimout
, cela n’empêchera pas le prochain élément d’être défini en gras.
Vous pouvez le faire avec une méthode comme celle-ci:
function bold(i){ if(i>0){ $tdArr.eq(i-1).removeClass('bold'); } if(i == $tdArr.length){ return; } $tdArr.eq(i).addClass('bold') setTimeout(function() { bold(i+1) },900); }
Et puis, pour l’appeler, il vous suffira d’appeler en bold(0)
:
Exemple en direct: http://jsfiddle.net/rJGjZ/
Essaye ça:
$.each(tdArr, function(index, element) { var $elem = $(element); $elem.addClass("bold"); setTimeout(function(){ $elem.removeClass("bold"); }, 900) })
Le second paramètre n’est pas un élément jQuery et vous devez le convertir.
Est-ce que quelque chose comme ce travail pour vous?
function Bold(element) { $(element).addClass("bold"); // we bold the current tdArr setTimeout(function(){ var nextSibling = $(element).next("td") // (if the tdArr are "td" tags) we find the next td brother of this one if (!!nextSibling) Bold(nextSibling); // if there is a brother, repeat the function on him after 900ms }, 900) } Bold(myfirsttd);
Augmentez le délai lors de l’itération du tableau et veillez à envelopper votre élément dans jQuery s’il n’est pas déjà encapsulé. S’il s’agit d’une collection d’éléments jQuery, utilisez each
d’ each
pour effectuer une itération.
var delay = 900 $els.each(function(){ var $this = $(this) setTimeout(function(){ $els.removeClass('bold') $this.addClass('bold') }, delay+=900) })
Sinon, j’utiliserais et encapsulerais l’élément dans jQuery.
for (var i=0, l=arr.length, d, prev; i