jQuery triplica el menú anidado con menús secundarios: jquery, wordpress, menu, anested

No estoy avanzando en esto, así que necesito tu ayuda.

Es un menú triple anidado para wordpress. Y se ve así:

<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#" class="has_children">Link with children</a>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#" class="has_children">Link with children</a>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Quiero añadir una clase has_children a cada enlace que tiene una ul.sub-menu.

Mi código ahora es:

jQuery.each(jQuery("ul.sub-menu li").has("ul.sub-menu"), function() {
jQuery("a", this).addClass("has_children");
})

Eso funciona para el primer ul.sub-menu li pero todos los demás enlaces secundarios ahora tienen la clase has_children incluso si no tienen un submenú.

EDITAR [Solución]:

jQuery.each(jQuery("ul.sub-menu li").has("ul.sub-menu"), function () {
jQuery(">a", this).addClass("has_children");

})

Eso hizo el truco! :) Gracias

Respuestas

1 para la respuesta № 1

Necesitas cambiar tu selector para que coincida solo con el directo a dentro de la corriente li de lo contrario va a coincidir con todos a dentro de todos los niveles. Utilizar >a para que coincida con el directo a solo, similar a esto:

jQuery.each(jQuery("ul.sub-menu li").has("ul.sub-menu"), function () {
jQuery(">a", this).addClass("has_children");
})

---

MANIFESTACIÓN - Coincidiendo solo con el a directamente dentro de la corriente li

---

En la DEMO quité todas las has_children las clases que tenía en el HTML inicial para mostrar que, de hecho, el script las agrega como se espera.

---

0 para la respuesta № 2

jsFiddle

HTML:

<ul class="sub-menu">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link with children</a>
<ul class="sub-menu">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link with children</a>
<ul class="sub-menu">
<li><a href="#">Link</a>

</li>
<li><a href="#">Link</a>

</li>
</ul>
</li>
</ul>
</li>
</ul>

jQuery:

$("ul.sub-menu li").each(function () {
if ($(this).find("ul").hasClass("sub-menu"))  $(this).find("a:first").addClass("has_children");
});

---