Memilih hanya elemen level pertama di jquery

Bagaimana cara memilih elemen tautan hanya dari induk <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 di css ul li a, tapi tidakul li ul li a

Terima kasih

$("ul > li a")

Tetapi Anda perlu menetapkan kelas di root ul jika Anda secara khusus ingin menargetkan ul terluar:

<ul class="rootlist">
...

Maka itu:

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

Cara lain untuk memastikan Anda hanya memiliki elemen root li:

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

Kelihatannya kludgy, tapi seharusnya berhasil

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

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

Seperti yang dinyatakan dalam jawaban lain, metode paling sederhana adalah dengan mengidentifikasi elemen root secara unik (menurut ID atau nama kelas) dan menggunakan pemilih keturunan langsung.

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

Namun, saya menemukan pertanyaan ini untuk mencari solusi yang akan bekerja pada elemen yang tidak disebutkan namanya di berbagai kedalaman DOM.

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

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

JsFiddle lengkap tersedia di sini .

Cukup Anda dapat menggunakan ini ..

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

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

Anda mungkin ingin mencoba ini jika hasil masih mengalir ke turunan, dalam banyak kasus JQuery masih berlaku untuk turunan.

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

Menggunakan metode ini: E> F Mencocokkan semua elemen F yang merupakan turunan dari elemen E.

Memberi tahu JQuery untuk hanya mencari turunan eksplisit. http://www.w3.org/TR/CSS2/selector.html

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

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

Coba ini:

$("#myId > UL > LI")

Saya mengalami masalah dengan kelas bersarang dari kedalaman apa pun jadi saya menemukan ini. Ini akan memilih hanya level pertama yang ditemuinya dari Objek Jquery yang mengandung:

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)

mungkin ada banyak cara lain

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

.form-item kedua pada anak tingkat pohon dari .add_to_cart