Appliquer un style css a tous les ID choisis

Bonjour

Voici mon code :

$(document).ready(function() {
	function myFunction() {
		$('#id1').text("text1");
		$('#id2').text("text2");
		$('#id3').text("text3");
	}
	$(myFunction);
});

<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>

Toutes ces div vont alors afficher du texte (text1 dans div id1, etc)
J'aimerais appliquer un style css a TOUS ces elements. Si ce n'etait qu'un element, j'aurais fait

$('#id1').css('top','0');

par exemple.

Mais comment selectionner tous les id de ma fonction ? Je peux les mettre dans une variable ? Ou faire une boucle ? Je suis debutant en JS... (et en algo aussi)

Merci =)
Modifié par LightBen (22 Oct 2013 - 14:50)

Coucou !

Voici une solution avec les sélecteurs CSS3 (sélectionne les DIV dont les id commencent par "id").

$('div[id^="id"]').css('top','0');

Personnellement, j'aurais changer la structure en entourant les div par un div.

<div class="test">
   <div id="id1"></div>
   <div id="id2"></div>
   <div id="id3"></div>
</div>

$('.test div').css('top','0');

Plusieurs solutions, la plus simple étant d'appliquer une class CSS et donc :

$('.enHaut').css('top','0');

Sinon tu peux faire quelque chose comme cela

$('div[id^=id]').css('top','0');
//Toutes les divs qui possèdent un attribut id qui commence par "id"

Je trouve la méthode avec les class plus adaptée.

J'ai simplifie mon code car mes id sont plus nombreux, eparpilles dans mon code et ont des noms bien differents.

Donc le mieux serait de leur donner une classe commune vous dites ? Puis de manipuler cette classe ?

Edit : j'ai mal explique mon probleme, j'ai oublie de preciser un detail :
Je veux manipuler tous mes id voulus lorsque la fonction myFunction est appelee.

En gros :
Lorsque je clique sur un bouton, j'appelle myFunction qui change le contenu des div, et je veux leur appliquer un style CSS a ce meme moment.

J'ai trouve comment me debrouiller...
Au lieu d'appeler ma fonction sur un clic, lors d'un clic, je cree une fonction qui commence par appeler ma fonction puis je continue mon code.
En gros mon code c'etait ca :

$('#myButton').click(myFunction);

Maintenant c'est ca :

	$('#myButton').click(function() {
		myFunction();
		$('.maClasseCommune').css('top','0');
	});

Merci a vous =)
Modifié par LightBen (22 Oct 2013 - 14:24)

Re... un nouveau probleme est venu s'ajouter...

En gros maintenant, j'ai ca :
bouton1 bouton2
div

Si je clique sur le bouton1, la div a pour contenu texte 1 et si je clique sur le bouton 2, texte 2

Je change le contenu de la div en utilisant text().
Ensuite, apres que le texte soit change, ma fonction demande a ajouter une classe. Je mets des effets a cette classe.

Seul probleme, j'aimerais animer le changement de contenu. Pour le moment ca fait que basculer entre texte 1 et texte 2, et je n'arrive pas avec le CSS transition ou animation a animer ca (fondu, opacite 0 a 1 en 1s par exemple).

Comment faire ?

J'ai peut etre trouve un moyen, mais il faut que je sache comment puis-je utiliser la fonction .css sur une duree programmee ?

Genre $('.maClasse').css('opacity', '0') mais sur une duree de 1s c'est possible ?

Edit : bon, je vais essayer d'arreter de deranger le forum durant mes essais de trouver la solution, en gros si je detaille chaque action petit a petit je peux y arriver (utilisant fadeOut, puis fadeIn, etc)

Encore un edit : j'ai utilise fadeOut(500) puis fadeIn(500) puis enfin ma fonction entouree d'un setTimeout de 500. Du coup ca fait 500ms ca disparait, a ce moment la le texte est change puis pendant 500ms ca reapparait. Youhou. Dodo
Modifié par LightBen (22 Oct 2013 - 15:41)