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

Comment puis-je sélectionner les éléments de lien du parent uniquement <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 pasul li ul li a

Merci

$("ul > li a")

Mais vous devrez définir une classe sur la racine ul si vous souhaitez spécifiquement cibler l'ul le plus externe:

<ul class="rootlist">
...

Alors c'est:

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

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

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

Ça a l'air kludgy, mais ça devrait faire l'affaire

Une fois que vous avez l'ul initial, vous pouvez utiliser la méthode children () , 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 racine est de lui donner une classe ou un identifiant. Ce qui suit suppose que vous avez une racine ul avec id root.

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

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 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 des éléments sans nom à des profondeurs variables du DOM.

Cela peut être réalisé en vérifiant chaque élément et en s'assurant qu'il n'a 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 d'origine est:

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

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

JsFiddle complet disponible ici .

Vous pouvez simplement l'utiliser.

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

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

Vous voudrez peut-être essayer ceci si les résultats sont toujours transmis aux 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 rechercher uniquement les enfants explicites. http://www.w3.org/TR/CSS2/selector.html

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

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

Essaye ça:

$("#myId > UL > LI")

J'ai eu des problèmes avec les classes imbriquées de n'importe quelle profondeur, alors j'ai compris. Il ne sélectionnera que le premier niveau qu'il rencontre d'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>

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 de nombreuses autres façons

.add_to_cart >>> .form-item:eq(1)

le deuxième .form-item au niveau de l'arborescence enfant du .add_to_cart