Discussion :

[clavier12AZQSWX]

bonjour,

j'arrive pas à sélectionner que les élements qui ne sont pas imbriqués dans un élement déterminé.
Dans ma tête, je me dis "sélectionner que les DIV de "qui n'ont pas le div de "groupement" comme parent"

exemple de code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<td>
<div class="groupement">
 <div class="solo"> a </div>
 <div class="solo"> b </div>
</div>
<div class="solo"> c </div>
<div class="groupement">
 <div class="solo"> d </div>
 <div class="solo"> e </div>
</div>
<div class="solo"> f </div>
</td>

si je fais $(".solo") ça me sort "a b c d e f" alors que je ne veux que "c f" car ils ne sont pas encapsulés dans une div classée "groupement"


j'ai aussi tenté par désespoir cela :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".solo").not(".groupement")

mais ça ne marche pas hélas....

comment faire ?

[NoSmoking]

Bonjour,

j'ai aussi tenté par désespoir cela :
...
mais ça ne marche pas hélas....

il n'y a pas de place au hasard !

A supposer que tous les éléments cités soient contenus dans une <td> tu n'auras que la possibilité d'accéder aux éléments de premier niveau, enfants directs donc, de la façon suivante :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
td > .solo {
  color: #FF0;
}

à toi de transformer cela en sélecteur jQuery

[Dave Hiock]

\ô/

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="groupement">
    <div class="solo"> a </div>
    <div class="solo"> b </div>
</div>
<div class="solo"> c </div>

d'un autre côté avoir un élément enfant solo d'un élément parent groupement n'aide pas forcément le ciblage et l'éventuelle sémantique via les classes.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="groupement">
    <div> a </div>
    <div> b </div>
</div>
<div class="solo"> c </div>

serait plus opportun.

[clavier12AZQSWX]

bonsoir,

je ne suis plus au taf, mais je pense que je vais donc essayer $(".groupement> .solo")

et en attendant, j'avais trouvé une rustine dans ma boucle des $(".solo") :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
classe_du_parent=$(this).parent().prop('className');
if (classe_du_parent!="groupement")
{
//faisons nos trucs
}
else
{
//on fait rien car l'élement est dans une div groupement
}

[NoSmoking]

et en attendant, j'avais trouvé une rustine dans ma boucle des $(".solo") :

mais pourquoi prends tu le problème à l'envers ?

Outre le sélecteur que je t'ai proposé, qui me semble être le plus simple, tu peux également utiliser :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
td > .solo {
  color: #F00;
}
:not([class="groupement"]) > .solo {
  font-weight: 700;
}
:not(.groupement) > .solo {
  font-size: 2em;
}

ce qui se traduit en jQuery par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const elements = $("td > .solo");
// ou
const elements = $(":not([class='groupement']) > .solo");
// ou autre écriture
const elements = $(":not(.groupement) > .solo");

Les sélecteurs se lisent de la droite vers la gauche.

Il te faut revenir aux fondamentaux :

• Table de référence des sélecteurs
• La pseudo-classe de négation, :not()

d'un autre côté avoir un élément enfant solo d'un élément parent groupement n'aide pas forcément le ciblage et l'éventuelle sémantique via les classes.

Tout à fait mais il me semble avoir lu qu'il n'avait pas la main sur le HTML.