jQuery ogni voce di menu ma non voci di sottomenu: jquery

<ul class="main-menu">
<li>
<a href="domain.com/host">Host</a>
<ul class="sub-menu nav">
<li>
<a href="domain.com/host/party">Party</a>
</li>
</ul>
</li>
</ul>

$(".main-menu li a").each(function(ev){
var name = $(this).text();
console.log(name);
});

Il codice sopra riportato elenca entrambi Host e Party quando tutto ciò che voglio è Host

jsFiddle

risposte:

0 per risposta № 1

Usa il selettore figlio al posto del selettore discendente:

$(".main-menu>li>a").each(function(ev){
var name = $(this).text();
console.log(name);
});

Vedere http://www.w3.org/TR/css3-selectors/ per ulteriori informazioni sui selettori CSS o http://api.jquery.com/category/selectors/ per la pagina dei selettori jQuery.

---

2 per risposta № 2

Puoi usare > è usato per selezionare elementi con un genitore specifico, guarda solo un livello in basso nella struttura del markup, non più in profondità.

$(".main-menu>li>a").each(function(ev){
var name = $(this).text();
console.log(name);
});

Violino

Per ulteriori informazioni sui selezionatori css visita Qui

---

1 per risposta № 3

$(".main-menu > li > a").each(function(ev){
var name = $(this).text();
console.log(name);
});

L'aggiunta di > è tutto ciò che serve - che indica solo discendenti diretti. È chiamato il selettore di bambini

---

1 per risposta № 4

Puoi usare genitore-figlio invece di antenato-discendente.

Dimostrazione dal vivo

$(".main-menu > li > a").each(function(ev){
var name = $(this).text();
console.log(name);
});

---

1 per risposta № 5

Per usare il selettore di bambini(>).

Documentazione (Child Selector): http://api.jquery.com/child-selector/

VIOLINO dimostrazione

$(".main-menu > li > a").each(function(ev){
var name = $(this).text();
console.log(name);
});

---

0 per risposta № 6

Uso bambino selettore:

$(".main-menu>li>a").each(function(ev){
//code here
});

---