Selecionando apenas elementos de primeiro nível no jquery

Como posso selecionar os elementos do link apenas do pai <ul>em uma 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>

Então, em css ul li a, mas nãoul li ul li a

obrigado

$("ul > li a")

Mas você precisaria definir uma classe no ul raiz se quiser direcionar especificamente o ul mais externo:

<ul class="rootlist">
...

Então é:

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

Outra maneira de garantir que você tenha apenas os elementos raiz li:

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

Parece desajeitado, mas deve funcionar

Depois de obter o ul inicial, você pode usar o método children () , que considerará apenas os filhos imediatos do elemento. Como @activa aponta, uma maneira de selecionar facilmente o elemento raiz é fornecer uma classe ou um id. O seguinte assume que você tem um ul root com id root.

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

Conforme declarado em outras respostas, o método mais simples é identificar exclusivamente o elemento raiz (por ID ou nome de classe) e usar o seletor descendente direto.

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

No entanto, me deparei com essa questão em busca de uma solução que funcionasse em elementos não nomeados em diferentes profundidades do DOM.

Isso pode ser obtido verificando cada elemento e garantindo que não haja um pai na lista de elementos correspondentes. Aqui está minha solução , envolvida em um seletor 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 isso, a solução para a postagem original é:

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

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

JsFiddle completo disponível aqui .

Simplesmente você pode usar isso ..

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

Veja o exemplo: https://codepen.io/gmkhussain/pen/XzjgRE

Você pode querer tentar isso se os resultados ainda fluem para os filhos; em muitos casos, o JQuery ainda se aplica aos filhos.

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

Usando este método: E> F Corresponde a qualquer elemento F que seja filho de um elemento E.

Diz ao JQuery para procurar apenas filhos explícitos. http://www.w3.org/TR/CSS2/selector.html

Você também pode usar $("ul li:first-child")para obter apenas os filhos diretos da UL.

Eu concordo, porém, você precisa de um ID ou outra coisa para identificar o UL principal, caso contrário, ele apenas selecionará todos. Se você tivesse um div com um ID em torno do UL, a coisa mais fácil de fazer seria$("#someDiv > ul > li")

Experimente isto:

$("#myId > UL > LI")

Eu tive alguns problemas com classes aninhadas de qualquer profundidade, então descobri isso. Ele selecionará apenas o primeiro nível que encontrar de um objeto Jquery contido:

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>

1

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

provavelmente existem muitas outras maneiras

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

o segundo .form-item no nível da árvore filho do .add_to_cart