28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sélécteur - condition "si je suis dans cette div alors"

Bonjour,

Alors je vous montre un code test : 
 

<div id="Partie1">

	<div class="element" style="display: none;"> 1-1 </div>
	<div class="element" style="display: none;"> 1-2 </div>
	<div class="element" style="display: none;"> 1-3 </div>
	<div class="element" style="display: none;"> 1-4 </div>

</div>

<div id="Partie2">

	<div class="element" style="display: none;"> 2-1 </div>
	<div class="element" style="display: none;"> 2-2 </div>
	<div class="element" style="display: none;"> 2-3 </div>
	<div class="element" style="display: none;"> 2-4 </div>

</div>


En gros en js je peux facilement afficher toutes les class element grâce à une boucle for qui mets tout en display : ""; .
Mon problème c'est que comment faire si je veux afficher uniquement les class element présente dans la première div ( la div id = "Partie1").
Pour résumer j'aimerai que en cliquant sur un bouton une fonction js m'affiche juste 1-1 1-2 1-3 1-4 et n'affiche pas les element présent dans "Partie2".

Il y'aura t'il une condition en js qui permettrait de dire : affiche ces div si elles appartiennent à cette autre div ?


De plus il est essentiel que toutes mes "sous-div" gardent la même class car le schéma de ce code se répète des 100 de fois et je ne peux pas donner une class différente à chacun.

J'espère avoir été assez claire,
Merci =)
Administrateur
Hello,

> Mon problème c'est que comment faire si je veux afficher uniquement les class element présente dans la première div ( la div id = "Partie1")

Ce qui correspondrait exactement à ton raisonnement serait :

:not(#Partie1) .element {
  display: none;
}

Modifié par Raphael (01 Jun 2017 - 14:16)
d'accord merci

Mais cette fonctionalité doit être dynamique , c'est à dire que lorsque je clique sur un bouton une fonction javascript se lance et fait apparaître tous les element.

Cependant, j'aimerai que cette même fonction lorsque je clique fasse apparaitre uniquement les element de la Partie1 en 1 clique mais puisse aussi les refaire disparaitre, apparaitre a volonté.

En gros j'aimerai rendre uniquement les element de la partie 1 en display: block; mais dynamiquement direct avec une fonction js au onclick.
Le problème de vos solution c'est que le css intervient ( je crois) directement au chargement de la page et sera le même a chaque chargement.

J'essaye 'être claire c'est pas simple ahah

merci.

PS : Mon post est arrivé dans le forum CSS et Mise a forme alors que j'avais mis javascript je sais pas si je peux le bouger.
Modérateur
Bonjour,

Une solution possible serait qu'avec le JS tu rajoute une classe au parent dont tu veux afficher les enfants.
Au click sur le bouton "partie2" tu cherches l'élément #Partie2 en JS (getElementbyID) et tu lui rajoute une classe .montretesenfants (classList)

En parrallèle dans le css par défaut tout les .elements sont en display:none; et tu rajoute que .montretesenfants .elements sont displya:block; (donc que les enfants du bloc sélectionné s'affichent).
Modifié par _laurent (01 Jun 2017 - 14:36)
Meilleure solution
Modérateur
C'est seulement la base d'une des nombreuse solution possible hein. elle est perfectible en fonction de tes besoins (animation etc) ou alors elle peut ne pas coller à ton soucis.
Tiens nous au jus Smiley smile
Sujet clos
Aller à