Pertanyaan Memilih hanya elemen tingkat pertama di jquery


Bagaimana saya dapat memilih elemen tautan hanya dari orang tua <ul> dari daftar seperti ini?

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

Jadi dalam css ul li a, tapi tidak ul li ul li a

Terima kasih


76
2018-06-10 20:11


asal


Jawaban:


$("ul > li a")

Tetapi Anda perlu menetapkan kelas pada akar ul jika Anda secara khusus ingin menargetkan ul terdepan:

<ul class="rootlist">
...

Maka itu:

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

Cara lain untuk memastikan Anda hanya memiliki elemen li root:

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

Kelihatannya kludgy, tetapi harus melakukan trik


90
2018-06-10 20:14



Setelah Anda memiliki ul awal, Anda dapat menggunakan anak-anak () metode, yang hanya akan mempertimbangkan anak-anak langsung dari elemen. Seperti yang ditunjukkan @activa, salah satu cara untuk dengan mudah memilih elemen root adalah dengan memberinya kelas atau id. Berikut ini mengasumsikan Anda memiliki ul root dengan id root.

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

44
2018-06-10 20:21



Sebagaimana dinyatakan dalam jawaban lain, metode paling sederhana adalah secara unik mengidentifikasi elemen root (berdasarkan ID atau nama kelas) dan menggunakan pemilih langsung.

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

Namun, saya menemukan pertanyaan ini untuk mencari solusi yang akan berhasil elemen tanpa nama di berbagai kedalaman dari DOM.

Ini dapat dicapai dengan memeriksa setiap elemen, dan memastikannya tidak memiliki induk dalam daftar elemen yang cocok. Ini aku larutan, dibungkus dalam pemilih jQuery 'paling atas'.

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

Memanfaatkan ini, solusi untuk posting asli adalah:

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

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

Lengkapi jsFiddle tersedia sini.


7
2018-01-11 14:28



Anda mungkin ingin mencoba ini jika hasilnya masih mengalir ke anak-anak, dalam banyak kasus JQuery akan tetap berlaku untuk anak-anak.

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

Menggunakan metode ini: E> F Cocok dengan elemen F apa pun yang merupakan anak dari elemen E.

Memberi tahu JQuery agar hanya mencari anak-anak yang eksplisit. http://www.w3.org/TR/CSS2/selector.html


3
2018-06-10 09:01



Cukup Anda bisa menggunakan ini ..

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

Lihat contoh: https://codepen.io/gmkhussain/pen/XzjgRE


2
2017-11-07 10:01



Anda juga bisa menggunakan $("ul li:first-child") hanya mendapatkan anak-anak langsung dari UL.

Saya setuju meskipun, Anda perlu ID atau sesuatu yang lain untuk mengidentifikasi UL utama jika tidak, itu hanya akan memilih semuanya. Jika Anda memiliki div dengan ID di sekitar UL, hal termudah adalah melakukannya$("#someDiv > ul > li")


0
2018-06-10 21:48



Coba ini:

$("#myId > UL > LI")

0
2017-10-28 16:43