Wybieranie tylko elementów pierwszego poziomu w jquery

94

Jak mogę wybrać elementy odsyłaczy tylko rodzica <ul>z takiej listy?

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

Więc w css ul li a, ale nieul li ul li a

Dzięki

aston
źródło

Odpowiedzi:

109
$("ul > li a")

Ale musisz ustawić klasę na głównym ul, jeśli chcesz kierować reklamy na najbardziej zewnętrzny ul:

<ul class="rootlist">
...

Wtedy to:

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

Inny sposób upewnienia się, że masz tylko główne elementy li:

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

Wygląda niezdarnie, ale powinno załatwić sprawę

Philippe Leybaert
źródło
Hmm, odkryłem, że mój problem dotyczy używania jquery 1.2. Zastąpiłem go 1.3 i tego rodzaju selektory działają teraz dobrze. Bardzo dziękuję za twoją odpowiedź i wszystkim, którzy odpowiedzieli.
aston
Jeśli nie chcesz dodawać klasy, po prostu wykonaj $ ("ul: first> li a"), oczywiście, zadziała to tylko na pierwszym poziomie, a nie na poziomach wewnętrznych.
Alfonso,
Dziękuję za wskazówkę. To też przetestowałem i wygląda na to, że działa dobrze: ul.find(">li");jeśli masz węzeł "ul" jako obiekt JQuery w zmiennej ul.
John Boe
56

Po uzyskaniu początkowej ul, możesz użyć metody children () , która uwzględni tylko bezpośrednie elementy potomne elementu. Jak wskazuje @activa, jednym ze sposobów łatwego wyboru elementu głównego jest nadanie mu klasy lub identyfikatora. Poniższe założenie zakłada, że ​​masz główny ul z identyfikatorem root.

$('ul#root').children('li');
tvanfosson
źródło
2
Dzięki, jest to dla mnie bardzo pomocne. Można $('ul').first().children('li')również użyć
Ivan Black
Jest to dla mnie preferowana odpowiedź, ponieważ mam już element, więc zamiast .find użyję .children.
Herbert Van-Vliet
7

Jak stwierdzono w innych odpowiedziach, najprostszą metodą jest jednoznaczne zidentyfikowanie elementu głównego (według identyfikatora lub nazwy klasy) i użycie bezpośredniego selektora potomków.

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

Jednak natknąłem się na to pytanie w poszukiwaniu rozwiązania, które działałoby na nienazwanych elementach na różnych głębokościach DOM.

Można to osiągnąć sprawdzając każdy element i upewniając się, że nie ma on rodzica na liście dopasowanych elementów. Oto moje rozwiązanie , zapakowane w selektor jQuery „na górze”.

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;
  }
});

Wykorzystując to, rozwiązaniem oryginalnego postu jest:

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

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

Dostępne kompletne jsFiddle tutaj .

Courtney Christensen
źródło
Używając nowych metod DOM możesz radykalnie poprawić wydajność :topmost- spróbuj użyć .parentElement.closest(selector). Jak zawsze, IE + Edge jest jedynymi, które go nie obsługują> :-( więc oto polyfill pastebin.com/JNBk77Vm
oriadam
5

Po prostu możesz tego użyć ...

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

Zobacz przykład: https://codepen.io/gmkhussain/pen/XzjgRE

GMK Hussain
źródło
3

Możesz spróbować tego, jeśli wyniki nadal spływają do dzieci, w wielu przypadkach JQuery nadal będzie miało zastosowanie do dzieci.

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

Używając tej metody: E> F Pasuje do dowolnego elementu F będącego dzieckiem elementu E.

Mówi JQuery, aby szukał tylko jawnych dzieci. http://www.w3.org/TR/CSS2/selector.html

TitanKing
źródło
0

Możesz także użyć $("ul li:first-child") aby uzyskać tylko bezpośrednie dzieci UL.

Zgadzam się jednak, potrzebujesz identyfikatora lub czegoś innego, aby zidentyfikować główny UL, w przeciwnym razie wybierze je wszystkie. Gdybyś miał div z identyfikatorem wokół UL, najłatwiej byłoby to zrobić$("#someDiv > ul > li")

CBarr
źródło
3
To jest nieprawidłowe użycie :first-child. Spowoduje to wybranie „pierwszego lize wszystkich ul”. Oryginalny post zawierał prośbę o „każdy liod pierwszego ul”.
Courtney Christensen
0

Spróbuj tego:

$("#myId > UL > LI")
Lebnik
źródło
0

Miałem problemy z zagnieżdżonymi klasami z dowolnej głębokości, więc to rozgryzłem. Wybierze tylko pierwszy napotkany poziom zawierającego obiekt 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>

Shawn Dotey
źródło
0

1

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

istnieje prawdopodobnie wiele innych sposobów

Arlan T
źródło
-1
.add_to_cart >>> .form-item:eq(1)

drugi element .form na poziomie drzewa podrzędny z .add_to_cart

isidoro
źródło
1
To nawet nie ma sensu w pytaniu
renke
>>> Co to jest? Czy ten selektor ma nazwę? Czy to w ogóle prawidłowy selektor? A może to był żart?
John Boe,