web-dev-qa-db-fra.com

Sélection uniquement des éléments de premier niveau dans jQuery

Comment puis-je sélectionner les éléments de lien du seul parent <ul> dans 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

jqueryhtmlcsscss-selectors
86
aston
$("ul > li a")

Mais vous auriez besoin de définir une classe sur la racine ul si vous voulez spécifiquement cibler la plus éloignée ul:

<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 racine li:

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

Il semble kludgy, mais il devrait faire l'affaire

101
Philippe Leybaert

Une fois que vous avez le ul initial, vous pouvez utiliser la méthode children () , qui ne considère que les enfants immédiats de l'élément. Comme @activa le fait remarquer, un moyen de sélectionner facilement l'élément racine consiste à lui attribuer une classe ou un identifiant. Ce qui suit suppose que vous avez une racine ul avec id root.

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

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

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

Cependant, je suis tombé sur cette question à la recherche d'une solution qui fonctionnerait sur éléments non nommés à à différentes profondeurs du DOM.

Cela peut être réalisé en vérifiant chaque élément et en s'assurant qu'il ne possède pas de parent dans la liste des éléments correspondants. Voici ma solution , enveloppée 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 cela, la solution au message original est:

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

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

Complete jsFiddle disponible ici .

7
Courtney Christensen

Vous pouvez simplement utiliser ceci .. 

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

Voir exemple: https://codepen.io/gmkhussain/pen/XzjgRE

3
GMK Hussain

Vous voudrez peut-être essayer ceci si les résultats continuent à affecter les enfants. Dans de nombreux cas, JQuery s'appliquera 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 ne rechercher que les enfants explicites . http://www.w3.org/TR/CSS2/selector.html

3
TitanKing

Essaye ça:

$("#myId > UL > LI")
0
Lebnik

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

Je conviens cependant que vous avez besoin d’un identifiant ou de quelque chose d’autre pour identifier l’UL principale, sinon il ne vous reste plus qu’à les sélectionner Si vous aviez une div avec une identification autour de l’UL, la chose la plus facile à faire serait $("#someDiv > ul > li")

0
Chris Barr

J'ai eu quelques problèmes avec les classes imbriquées de toutes les profondeurs alors j'ai compris cela. Il sélectionnera uniquement le premier niveau rencontré par un objet Jquery contenant:

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
  <div id="container">
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
  </div>
</div>

0
Shawn Dotey

1 

 $("ul.rootlist > target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)

il y a probablement beaucoup d'autres moyens

0
Arlan T