jQuery – Ajout de classes à des éléments dans un tableau avec délai

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