web-dev-qa-db-fra.com

Cibler les <li> s de premier niveau et non les <li> imbriqués

J'ai le HTML suivant:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

Avec jQuery, comment cibler le PREMIER niveau de <li> S?

Par exemple, je dois mettre la police en gras au survol des <li> S avec les lettres A, B et C, mais PAS ce style de police appliqué aux <li> S imbriqués (avec le nom sous-sections).

Voici une première démonstration de jsfiddle [~ # ~] [~ # ~] si vous souhaitez l'utiliser.

Merci.

MODIFIER -

Solution:

SÉLECTEURS D'ENFANTS , c'est la réponse.

Pas besoin de jQuery, cela peut être fait en utilisant CSS.

Voici la mise à jour [~ # ~] démo [~ # ~]

EDIT - Voici un démo plus claire

Merci,

jquerycsshtml-lists
52
Ricardo Zea

Avoir un conteneur <div> avec une classe, et utilisez le > sélecteur. Disons que la classe de votre div de conteneur est "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Noter la > le sélecteur ne fonctionne pas dans IE6 et inférieur lorsqu'il est utilisé comme sélecteur CSS. Cependant, il fonctionne dans tous les autres navigateurs, y compris IE7 et IE8, et lorsqu'il est utilisé dans JQuery, il fonctionne dans tous les navigateurs pris en charge par jQuery, y compris IE6.

98
Spudley

Vous pouvez faire ceci:

$('ul > li:not(:has(ul))');

Mais il vaudrait mieux donner à votre niveau supérieur <ul> un ID pour pouvoir le cibler avec un sélecteur CSS valide:

$('#topUL > li')
18
user113716

SÉLECTEURS D'ENFANTS , c'est la réponse.

Pas besoin de jQuery, cela peut être fait en utilisant CSS. Ciblez les éléments li de premier niveau avec un sélecteur:

ul > li {
    font-weight: bold;
}

Et puis annulez le style des éléments li plus profonds:

ul > li li {
    font-weight: normal;
}

Voici la mise à jour [~ # ~] démo [~ # ~] .

9
Ricardo Zea

Je définirais une règle pour cibler tous les éléments li, puis une autre pour remplacer celle qui cible les éléments li imbriqués.

li{font-weight:bold;}
ul ul li{font-weight:normal;}

Les éléments li imbriqués auraient un poids normal et le niveau supérieur serait en gras.

2
detaylor

Je ne pense pas que votre problème ait été complètement résolu (bien qu'il y ait eu de bonnes tentatives). Votre exemple de problème concerne l'application d'un style à un parent et empêcher l'enfant d'hériter du style - qui est un problème CSS.

Vous pouvez cibler les éléments de la liste en connaissant l'élément parent (comme certains l'ont noté). Ajoutez ensuite une classe au survol.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

Et votre CSS aurait la classe pour le parent, et un style négatif pour les enfants:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }
1
typeof