[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 =)

Bonjour,

On peut utiliser le sélecteur css

#Partie1 .element {
  display : "block";
}

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.

ok merci =)
Je vais essayer ça !

Bonne journée
Modifié par dorian91 (01 Jun 2017 - 15:15)

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

Rofl encore trop tard :'(

Proposition ^^ : https://jsfiddle.net/mtvnyhma/