Pytanie Zaznaczanie tylko elementów pierwszego poziomu w jquery


Jak mogę wybrać elementy łącza tylko nadrzędnego <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 nie ul li ul li a

Dzięki


76
2018-06-10 20:11


pochodzenie




Odpowiedzi:


$("ul > li a")

Ale musisz ustawić klasę na głównym ul, jeśli chcesz skierować się na najbardziej wysunięty ul:

<ul class="rootlist">
...

Potem jest:

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

Innym sposobem upewniając się, że masz tylko elementy root:

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

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


91
2018-06-10 20:14



Hmm odkryłem, że mój problem polegał na używaniu jquery 1.2. Wymieniłem go na 1.3 i tego typu selektory działają teraz dobrze. Dziękuję bardzo za odpowiedź i wszystkim, którzy odpowiedzieli. - aston
W przypadku, gdy nie chcesz dodawać klasy po prostu wykonaj $ ("ul: pierwszy> li a") oczywiście działałoby to tylko dla pierwszego poziomu, a nie dla poziomów wewnętrznych. - Alfonso
$ ("ul> li a"). not ("ul li ul a") działa poprawnie. - vicky


Gdy masz początkowy ul, możesz użyć dzieci() metoda, która będzie uwzględniać jedynie bezpośrednie elementy tego elementu. Jak wskazuje @activa, jednym ze sposobów łatwego wyboru elementu głównego jest nadanie mu klasy lub identyfikatora. Założono, że masz root roota z identyfikatorem root.

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

45
2018-06-10 20:21



Dzięki, bardzo mi to pomaga. Na $('ul').first().children('li') również mogą być używane - Ivan Black


Jak stwierdzono w innych odpowiedziach, najprostszą metodą jest jednoznaczna identyfikacja elementu głównego (według ID lub nazwy klasy) i użycie bezpośredniego selektora potomnego.

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

Jednak natknąłem się na to pytanie w poszukiwaniu rozwiązania, które będzie działać nienazwane elementy w różne głębokości 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. Tutaj jest mój rozwiązanie, zawinięty w selektor jQuery "najwyższy".

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ązanie do pierwotnego postu jest:

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

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

Kompletne jsFiddle dostępne tutaj.


7
2018-01-11 14:28



Działa bardzo dobrze tutaj!
Korzystając z nowych metod DOM, możesz znacznie poprawić wydajność :topmost - spróbuj użyć .parentElement.closest(selector). Jak zawsze, IE + Edge nie są jedynymi, którzy go obsługują> :-( więc tutaj jest polyfill pastebin.com/JNBk77Vm - oriadam


Możesz spróbować tego, jeśli wyniki nadal spływają na dzieci, w wielu przypadkach JQuery nadal będzie obowiązywać dla dzieci.

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

Przy użyciu tej metody: E> F Pasuje do dowolnego elementu F będącego dzieckiem elementu E.

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


3
2018-06-10 09:01



ten naprawdę działa - Roberto Alarcon


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

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

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


2
2017-11-07 10:01





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łówne UL, inaczej po prostu wybierze je wszystkie. Jeśli miałeś div z identyfikatorem w pobliżu UL, to najłatwiej byłoby zrobić$("#someDiv > ul > li")


0
2018-06-10 21:48



To jest nieprawidłowe użycie :first-child. To wybierze "pierwszy li z każdego ulOryginalny post wymagał "wszystkiego" li od pierwszego ul. " - Courtney Christensen


Spróbuj tego:

$("#myId > UL > LI")

0
2017-10-28 16:43





Miałem problemy z zagnieżdżonymi klasami z dowolnej głębokości, więc wymyśliłem to. Wybierze tylko pierwszy poziom napotkanego obiektu Jquery zawierającego:

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





1

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

prawdopodobnie istnieje wiele innych sposobów


0
2018-04-27 15:54