Sélectionner uniquement les éléments de premier niveau dans jquery

Question

Comment puis-je sélectionner les éléments de lien du parent uniquement ? <ul> d'une liste comme celle-ci ?

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

Donc, en css ul li a mais pas ul li ul li a

Merci

Answer 1

$("ul > li a")

Mais vous devez définir une classe sur l'ul racine si vous voulez cibler spécifiquement l'ul le plus extérieur :

<ul class="rootlist">
...

Alors c'est :

$("ul.rootlist > li a")....

Une autre façon de s'assurer que vous n'avez que les éléments Root li :

$("ul > li a").not("ul li ul a")

Ça a l'air bizarre, mais ça devrait faire l'affaire.

Answer 2

Une fois que vous avez le ul initial, vous pouvez utiliser l'outil enfants() qui ne prendra en compte que les enfants immédiats de l'élément. Comme le souligne @activa, une façon de sélectionner facilement l'élément Root est de lui donner une classe ou un id. Ce qui suit suppose que vous avez un élément Root ul avec id root .

$('ul#root').children('li');

Answer 3

Comme indiqué dans d'autres réponses, la méthode la plus simple consiste à identifier de manière unique l'élément Root (par son ID ou le nom de sa classe) et à utiliser le sélecteur direct descendant.

$('ul.topMenu > li > a')

Cependant, je suis tombé sur cette question en cherchant une solution qui fonctionnerait sur les sites suivants éléments sans nom à l'adresse profondeurs variables du DOM.

Pour ce faire, il faut vérifier chaque élément et s'assurer qu'il n'a pas de parent dans la liste des éléments correspondants. Voici mon solution enveloppé dans un sélecteur jQuery "topmost".

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

En utilisant ceci, la solution au message original est :

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

jsFiddle complet disponible aquí .

Answer 4

Vous pouvez essayer de le faire si les résultats s'appliquent toujours aux enfants. Dans de nombreux cas, JQuery s'applique toujours aux enfants.

$("ul.rootlist > li > a")

En utilisant cette méthode : E > F Correspond à tout élément F qui est un enfant d'un élément E.

Indique à JQuery de rechercher uniquement les enfants explicites. http://www.w3.org/TR/CSS2/selector.html

Answer 5

Vous pouvez également utiliser $("ul li:first-child") pour obtenir uniquement les enfants directs de l'UL.

Je suis d'accord cependant, vous avez besoin d'un ID ou quelque chose d'autre pour identifier l'UL principal, sinon il va simplement les sélectionner tous. Si vous aviez un div avec un ID autour de l'UL, la chose la plus simple à faire serait de $("#someDiv > ul > li")