En sélectionnant seulement les premiers éléments de niveau en jquery

Comment puis-je sélectionner le lien des éléments d'un seul parent <ul> à partir 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 dans le css ul li a, mais pas ul li ul li a

Grâce

InformationsquelleAutor aston | 2009-06-10

104
```
$("ul > li a")
```
Mais vous devez définir une classe sur la racine ul si vous souhaitez cibler les ultrapériphériques ul:
```
<ul class="rootlist">
...
```
Alors c'est:
```
$("ul.rootlist > li a")....
```
Une autre façon de vous assurer que vous avez seulement la racine li éléments:
```
$("ul > li a").not("ul li ul a")
```
Il semble encombrants, mais cela devrait faire l'affaire
- Hmm j'ai découvert que mon problème était avec l'utilisation de jquery 1.2. Je l'ai remplacé par de la 1.3 et ces types de sélecteurs sont fonctionne bien maintenant. Merci beaucoup pour votre réponse et tout le monde qui a répondu.
- Dans le cas où vous ne voulez pas d'ajouter une classe juste faire $("ul:première > li a") évidemment, cela ne fonctionne que pour le premier niveau, pas à l'intérieur des niveaux.
- $("ul > li un").pas("ul li ul a") sa fonctionne bien.
InformationsquelleAutor Philippe Leybaert
54

Une fois que vous avez la première ul, vous pouvez utiliser le enfants (les) méthode, qui ne considèrent les enfants immédiats de l'élément. Comme @activa souligne, d'une manière facilement sélectionner l'élément racine est de donner une classe ou un id). Ce qui suit suppose que vous avez une racine ul id root.
```
$('ul#root').children('li');
```
- Merci, C'est très utile pour moi. Un $('ul').first().children('li') peut également être utilisé
- C'est la meilleure réponse pour moi, comme j'ai déjà l'élément et ainsi .les enfants au lieu de .trouver.
InformationsquelleAutor tvanfosson
7

Comme indiqué dans d'autres réponses, la méthode la plus simple consiste à identifier de manière unique l'élément racine (par ID ou le nom de la classe) et d'utiliser le descendant direct du sélecteur.
```
$('ul.topMenu > li > a')
```
Cependant, je suis tombé sur cette question dans la recherche d'une solution qui permettrait de travailler sur sans nom des éléments à profondeurs variables du DOM.

Ceci peut être réalisé par la vérification de chaque élément, et s'assurer qu'il n'a pas un parent dans la liste des éléments qui correspondent. Voici mon solution, enveloppé dans un sélecteur jQuery 'supérieur'.
```
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 pour le post original est:
```
$('ul:topmost > li > a')

//Or, more simply:
$('li:topmost > a')
```
Complète jsFiddle disponible ici.
- Fonctionne très bien ici!
- En utilisant les nouvelles méthodes du DOM, vous pouvez considérablement améliorer les performances de :topmost - essayez d'utiliser .parentElement.closest(selector). Comme toujours, c'est à dire+de Bord sont les seuls à ne pas le soutenir >:-( alors, voici un polyfill pastebin.com/JNBk77Vm
InformationsquelleAutor Courtney Christensen
3

Vous pourriez veux essayer ce si les résultats coule toujours vers le bas pour les enfants, dans de nombreux cas, JQuery continue de s'appliquer aux enfants.
```
$("ul.rootlist > li > a")
```
À l'aide de cette méthode:
E > F Correspond à tout élément F qui est un enfant d'un élément de E.

Dit JQuery regarder uniquement explicite pour les enfants.
http://www.w3.org/TR/CSS2/selector.html
- ce on réellement de travail
InformationsquelleAutor TitanKing
3

Simplement, vous pouvez utiliser cette..
```
$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}
```
Voir l'exemple : https://codepen.io/gmkhussain/pen/XzjgRE

InformationsquelleAutor GMK Hussain
0

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

Je suis d'accord mais, vous avez besoin d'un ID ou autre chose afin d'identifier les principaux UL sinon, il suffit de les sélectionner tous. Si vous aviez un div avec un ID autour de l'UL, la meilleure chose à faire serait$("#someDiv > ul > li")
- C'est la mauvaise utilisation de :first-child. Cela permet de sélectionner le "premier li de chaque ul". Le post original est en demandant "chaque li à partir de la première ul."
InformationsquelleAutor Chris Barr
0

Essayez ceci:
```
$("#myId > UL > LI")
```
InformationsquelleAutor Lebnik

J'ai eu quelques difficultés avec les classes imbriquées à partir de n'importe quelle profondeur, alors j'ai pensé que cela. Il permettra de sélectionner uniquement le premier niveau il rencontre d'un contenant de l'Objet Jquery:

JS:

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

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

$levelOneElements.css({"color":"red"})

HTML:

<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>

InformationsquelleAutor Shawn Dotey

 $("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 façons de

InformationsquelleAutor Arlan T

-1
```
.add_to_cart >>> .form-item:eq(1)
```
la seconde .forme-point au niveau d'arborescence enfant de la .add_to_cart
- Ce n'est même pas de sens de la question
InformationsquelleAutor isidoro

Vous devez vous connecter pour publier un commentaire.