Seleccionar solo elementos de primer nivel en jquery

Question

¿Cómo puedo seleccionar los elementos de enlace del único padre <ul> de una lista como esta?

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

Así que en css ul li a, pero no ul li ul li a

Gracias

Answer 1

$("ul > li a") 

Pero que se necesitan para establecer una clase en la ul root si específicamente desea orientar la UL externo:

<ul class="rootlist"> 
... 

Entonces es:

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

Otra forma de asegurarse de que sólo tiene los elementos raíz Li:

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

Parece kludgy, pero debe hacer el truco

Answer 2

Una vez que tenga la ul inicial, puede usar el método children(), que solo tendrá en cuenta los elementos secundarios inmediatos del elemento. Como señala @activa, una forma de seleccionar fácilmente el elemento raíz es otorgarle una clase o una identificación. Lo siguiente supone que tiene una raíz ul con id root.

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

Answer 3

También puede utilizar $("ul li:first-child") sólo para obtener los hijos directos de la UL.

Estoy de acuerdo, sin embargo, necesita una identificación u otra cosa para identificar la UL principal; de lo contrario, simplemente las seleccionará todas. Si usted tuvo un div con un ID en todo el UL la cosa más fácil de hacer sería $("#someDiv > ul > li")

Answer 4

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

el segundo elemento .Form al niño nivel de árbol de la .add_to_cart

Answer 5

Es posible que desee probar este si los resultados aún fluyen hacia los niños, en muchos casos JQuery se aplicará a los niños.

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

uso de este método: E> F Equivale a cualquier elemento F que es un hijo de un elemento E.

dice a jQuery para mirar sólo para los niños explícitos. http://www.w3.org/TR/CSS2/selector.html

Answer 6

Como se indica en otras respuestas, el método más simple es identificar de forma única el elemento raíz (por ID o nombre de clase) y usar el selector descendente directo.

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

Sin embargo, me encontré con esta pregunta en busca de una solución que trabajar en elementos no identificados en diferentes profundidades del DOM.

Esto se puede lograr comprobando cada elemento y asegurándose de que no tiene un elemento primario en la lista de elementos coincidentes.Aquí está mi solution, envuelto en un selector 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; 
    } 
}); 

Utilizando esto, la solución al mensaje original es:

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

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

jsFiddle completo disponible here.

Answer 7

Prueba esto:

$("#myId > UL > LI") 

Answer 8

tuve algunos problemas con las clases anidadas de cualquier profundidad por lo que cuenta de esto. Se seleccionará sólo el primer nivel se encuentra con un objeto que contiene Jquery:

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>

Answer 9

Simplemente se puede utilizar este ..

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

Ver ejemplo: https://codepen.io/gmkhussain/pen/XzjgRE