Pregunta Seleccionar solo elementos de primer nivel en jquery


¿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 ul li ul li a

Gracias


76
2018-06-10 20:11


origen


Respuestas:


$("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


90
2018-06-10 20:14



Una vez que tenga la ul inicial, puede usar la niños() método, que solo considerará los hijos 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 id root.

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

44
2018-06-10 20:21



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 funcionaría en elementos sin nombre a profundidades variables 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 solución, 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 para la publicación original es:

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

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

Completo jsFiddle disponible aquí.


7
2018-01-11 14:28



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


3
2018-06-10 09:01



Simplemente puedes usar esto ...

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

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


2
2017-11-07 10:01



También puedes usar $("ul li:first-child") para obtener solo los hijos directos de la 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")


0
2018-06-10 21:48



Prueba esto:

$("#myId > UL > LI")

0
2017-10-28 16:43



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>


0
2018-05-01 16:17