Cibler un élément particulier

Résolu/Fermé
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
- 16 déc. 2013 à 22:42
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
- 17 déc. 2013 à 17:34
Bonjour,

J'ai une page avec des données récupérées en php.

Sa structure est la suivante :

<div id="contenant">
	<h2>titre</h2>
	<?php
	while ($a = $request->fetch())
	{
	?>
		<div class="contenu">
			<img src="img/<?php echo $a['icone']; ?>.png" alt="<?php echo $a['icone']; ?>" />
			<div class="texte">
				<?php echo $a['texte']; ?>
			</div>
		</div>
	<?php
	}
	?>
</div>


1. Je voudrais c'est cibler chaque div "contenu" pour lui mettre un background différent.

J'ai essayé en CSS avec un

.contenu:first-child


pour déjà arriver à cibler le premier ... mais ça ne fonctionne pas.

Je pense qu'il faut le faire en JavaScript (ou Jquery puisque le reste du site est avec JQuery) mais je ne vois pas comment.

2. Je voudrais cibler une div "contenu" sur deux pour lui mettre une class spécifique. Et là je sais que c'est possible mais impossible de me souvenir comment.

J'ai dans l'idée de leur mettre un ID croissant en utilisant une variable qui sera incrémentée à chaque boucle de php créant une de ces div et ensuite en JavaScript de mettre une class pour les ID pairs et une autre pour les ID impairs. Est-ce que je suis sur la bonne piste ?

Voilà si quelqu'un pouvait m'aider ce serait super ! Merci d'avance.

3 réponses

Cocolabaloune
Messages postés
53
Date d'inscription
mercredi 27 mai 2009
Statut
Membre
Dernière intervention
16 septembre 2015
5
17 déc. 2013 à 01:27
Bonjour,

Je ne crois pas qu'il serait nécessaire d'utiliser le javascript pour parvenir à vos fins.

Il est possible de sélectionner les éléments pairs et impairs avec ces pseudos sélecteurs CSS :

:nth-of-type(even)
:nth-of-type(odd)
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 10:19
Ah je savais bien qu'il y avait un truc ! Merci je teste ça dans l'après midi.
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 17:03
Super, j'ai pu réussir du premier coup (enfin le temps de tester lequel était pair et lequel impair). Je le note dans mon carnet des "trucs" pas souvent utilisés mais super utiles.
0
ThEBiShOp
Messages postés
8318
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 595
17 déc. 2013 à 10:31
sinon en jquery :



            $(function(){
                $('.contenu').each(function(){
                    $(this).css("background-image", "url('tonimage.jpg')");
                });
            });
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 12:54
Bonjour,

Oui mais là ça va mettre le même fond à toutes les div de la class "contenu", ce que je cherche à faire c'est que chacune ait un fond différent justement.
Et je ne peux pas cibler l'ID puisque je ne sais pas combien il y aura de div, celles-ci étant récupérées en php et donc dépendent du nombre d'entrées dans la base de données.

Ce que je veux c'est par exemple :
La première en rouge
La seconde en bleu
La troisième en vert
La quatrième en orange
La cinquième en violet
Et si il en a encre on recommence le cycle des couleurs.
0
ThEBiShOp
Messages postés
8318
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 595
17 déc. 2013 à 12:56
J'ai mis ce code juste pour montrer comment atteindre tous tes divs.

Dedans, tu fais ce que tu veux, tu peux faire un compteur pour attribuer la couleur de ton choix.
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 16:53
Heu oui pardon j'avais pas réfléchi, c'est vrai qu'en y ajoutant une variable là dedans ça va pouvoir faire ce que je veux.

Merci.
0
enqueteactualite
Messages postés
70
Date d'inscription
mercredi 11 décembre 2013
Statut
Membre
Dernière intervention
16 mai 2015
15
17 déc. 2013 à 15:48
voilà un exemple de ce que tu souhaite faire :

<div id="contenant">
	<h2>titre</h2>
	<?php
	$i = 0;
	$colors[0] = '#000';
	$colors[1] = '#001';
	$colors[2] = '#002';
	$colors[3] = '#003';
	while ($a = $request->fetch())
	{
	?>
		<div class="contenu" style="background-color:<?php echo $colors[0];?>">
			<img src="img/<?php echo $a['icone']; ?>.png" alt="<?php echo $a['icone']; ?>" />
			<div class="texte">
				<?php echo $a['texte']; ?>
			</div>
		</div>
	<?php
	$i++; if($i==4) $i=0;
	}
	?>
</div>
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 16:53
Merci beaucoup !

Je vais regarder tout ça ce soir, mais en effet dit comme ça bah ça semble très logique.
0
ThEBiShOp
Messages postés
8318
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 595
17 déc. 2013 à 16:55
Ce que j'essayais de te proposer était un peu similaire, mais en jquery.
C'est vrai qu'il n'y a pas vraiment d'intérêt à faire ça à part en js alors qu'on peut le faire à la volée en php.
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 17:02
Oui de toute manière la logique reste la même, c'est mieux en php parce que si javascript est désactivé ça marche aussi.

Mais là avec l'explication j'ai honte de ne pas avoir trouvé seule.
0
ThEBiShOp
Messages postés
8318
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 595
17 déc. 2013 à 17:05
^^
C'est mieux de centraliser les traitements, si tu peux tout faire en php, inutile d'aller utiliser le JS, sauf si c'est beaucoup plus rapide éventuellement.
Même chose en sql, tous les traitements que tu peux éviter de faire en php en les faisant en sql, il faut les faire.
0
Ysabe_l
Messages postés
11451
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
22 mai 2022
271
17 déc. 2013 à 17:21
Oui c'est vrai. Mais comme je suis pas fan de mettre le style dans la balise div je n'y avais même pas pensé. Mais dans un cas comme ça bah ça fait quand même plus propre, je comprends pourquoi des fois on trouve des style dans les balises sur certains sites alors qu'ils sont bien codés ^^.

Bon du coup ça marche parfaitement, j'ai un peu adapté à ce que je voulais et c'est parfait (et modifié le style="background-color:<?php echo $colors[0];?>" en style="background-color:<?php echo $colors[$i];?>").

Encore merci beaucoup.
0