Selezione solo degli elementi di primo livello in jquery

Come posso selezionare gli elementi di collegamento del solo genitore <ul>da un elenco come questo?

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

Quindi in CSS ul li a, ma nonul li ul li a

Grazie

$("ul > li a")

Ma dovresti impostare una classe sulla radice ul se vuoi specificamente indirizzare l'ul più esterno:

<ul class="rootlist">
...

Quindi è:

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

Un altro modo per assicurarti di avere solo gli elementi li di radice:

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

Sembra kludgy, ma dovrebbe fare il trucco

Una volta ottenuto l'iniziale ul, puoi utilizzare il metodo children () , che considererà solo i figli immediati dell'elemento. Come sottolinea @activa, un modo per selezionare facilmente l'elemento radice è assegnargli una classe o un id. Quanto segue presuppone che tu abbia una root ul con id root.

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

Come affermato in altre risposte, il metodo più semplice è identificare in modo univoco l'elemento radice (tramite ID o nome della classe) e utilizzare il selettore discendente diretto.

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

Tuttavia, mi sono imbattuto in questa domanda alla ricerca di una soluzione che funzionasse su elementi senza nome a diverse profondità del DOM.

Ciò può essere ottenuto controllando ogni elemento e assicurandosi che non abbia un genitore nell'elenco degli elementi corrispondenti. Ecco la mia soluzione , avvolta in un selettore jQuery "in alto".

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;
  }
});

Utilizzando questo, la soluzione al post originale è:

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

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

JsFiddle completo disponibile qui .

Semplicemente puoi usare questo ..

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

Vedi esempio: https://codepen.io/gmkhussain/pen/XzjgRE

Potresti provare questo se i risultati continuano a scorrere verso i bambini, in molti casi JQuery si applicherà ancora ai bambini.

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

Utilizzando questo metodo: E> F Corrisponde a qualsiasi elemento F figlio di un elemento E.

Indica a JQuery di cercare solo elementi secondari espliciti. http://www.w3.org/TR/CSS2/selector.html

Puoi anche utilizzare $("ul li:first-child")per ottenere solo i figli diretti dell'UL.

Sono d'accordo però, hai bisogno di un ID o qualcos'altro per identificare l'UL principale altrimenti li selezionerà tutti. Se avessi un div con un ID attorno all'UL, la cosa più semplice da fare sarebbe$("#someDiv > ul > li")

Prova questo:

$("#myId > UL > LI")

Ho avuto qualche problema con le classi nidificate da qualsiasi profondità, quindi l'ho capito. Selezionerà solo il primo livello che incontra di un oggetto Jquery contenente:

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)

ci sono probabilmente molti altri modi

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

il secondo .form-item a livello di albero figlio da .add_to_cart