tabla - Seleccionar solo elementos de primer nivel en jquery

seleccionar jquery por name

Question

¿Cómo puedo seleccionar los elementos de enlace de solo el 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>

Entonces en css ul li a , pero no en ul li ul li a

Gracias

Answer 1

1

 $("ul.rootlist > target-element")
2 $("ul.rootlist").find(target-element).eq(0) (only one instance)
3 $("ul.rootlist").children(target-element)

probablemente hay muchas otras formas

Answer 2

Como se indica en otras respuestas, el método más simple es identificar de manera ú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 funcione en elementos sin nombre a distintas profundidades del DOM.

Esto se puede lograr verificando cada elemento y asegurándose de que no tenga un padre en la lista de elementos coincidentes. Aquí está mi solution , envuelta 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 para la publicación original es:

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

Complete jsFiddle disponible solution .

Answer 3

Prueba esto:

$("#myId > UL > LI")

Answer 4

Puede intentar esto si los resultados aún fluyen hacia los niños, en muchos casos JQuery se aplicará a los niños.

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

Usando este método: E> F Coincide con cualquier elemento F que sea hijo de un elemento E.

Le dice a JQuery que solo busque hijos explícitos. http://www.w3.org/TR/CSS2/selector.html

Answer 5

Simplemente puedes usar esto ...

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

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

Answer 6

También puede usar $("ul li:first-child") para obtener solo los hijos directos de UL.

Aunque estoy de acuerdo, necesita una identificación u otra cosa para identificar la UL principal; de lo contrario, simplemente los seleccionará a todos. Si tuviera un div con una ID alrededor de la UL, lo más fácil sería $("#someDiv > ul > li")

Answer 7

Tuve algunos problemas con clases anidadas desde cualquier profundidad, así que me di cuenta de esto. Seleccionará solo el primer nivel que encuentre de un objeto Jquery que contenga:

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 8

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

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

Answer 9

$("ul > li a")

Pero necesitaría establecer una clase en la raíz ul si desea específicamente dirigirse a la UL más externa:

<ul class="rootlist">
...

Entonces es:

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

Otra forma de asegurarse de que solo tiene los elementos root li:

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

Parece kludgy, pero debería hacer el truco

Answer 10

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

el segundo .form-item en el árbol hijo desde el .add_to_cart