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
jquery
html
css
css-selectors
aston
źródło
źródło
ul.find(">li");
jeśli masz węzeł "ul" jako obiekt JQuery w zmiennej ul.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');
źródło
$('ul').first().children('li')
również użyć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 .
źródło
: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/JNBk77VmPo 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
źródło
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
źródło
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")
źródło
:first-child
. Spowoduje to wybranie „pierwszegoli
ze wszystkichul
”. Oryginalny post zawierał prośbę o „każdyli
od pierwszegoul
”.Spróbuj tego:
$("#myId > UL > LI")
źródło
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>
źródło
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
źródło
.add_to_cart >>> .form-item:eq(1)
drugi element .form na poziomie drzewa podrzędny z .add_to_cart
źródło