JQuery'de yalnızca birinci düzey öğeleri seçme

Böyle <ul>bir listeden yalnızca üst öğenin bağlantı öğelerini nasıl seçebilirim ?

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

Yani css'de ul li a , ama değilul li ul li a

Teşekkürler

$("ul > li a")

Ancak, özellikle en dıştaki ul'yi hedeflemek istiyorsanız, ul kökünde bir sınıf ayarlamanız gerekir:

<ul class="rootlist">
...

O zaman:

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

Yalnızca kök li öğelerine sahip olduğunuzdan emin olmanın başka bir yolu:

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

Garip görünüyor ama hile yapmalı

İlk ul bilgisine sahip olduğunuzda, öğenin yalnızca yakın çocuklarını dikkate alacak children () yöntemini kullanabilirsiniz . @Activa'nın işaret ettiği gibi, kök öğeyi kolayca seçmenin bir yolu ona bir sınıf veya kimlik vermektir. Aşağıdakiler, kimliğine sahip bir kök ul'niz olduğunu varsayar root.

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

Diğer yanıtlarda belirtildiği gibi, en basit yöntem, kök öğeyi benzersiz bir şekilde (kimlik veya sınıf adına göre) tanımlamak ve doğrudan alt seçiciyi kullanmaktır.

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

Ancak, üzerinde çalışacak bir çözüm arayışı içinde bu soruya rastladı isimsiz elemanların en değişen derinliklerde DOM.

Bu, her bir öğeyi kontrol ederek ve eşleşen öğeler listesinde bir ebeveyni olmadığından emin olarak elde edilebilir. İşte benim çözümüm , bir jQuery seçici 'en üstte'.

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

Bunu kullanarak, orijinal gönderinin çözümü:

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

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

Tam jsFiddle burada mevcuttur .

Basitçe bunu kullanabilirsiniz ..

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

Örneğe bakın: https://codepen.io/gmkhussain/pen/XzjgRE

Sonuçlar hala çocuklara akıyorsa bunu denemek isteyebilirsiniz, çoğu durumda JQuery yine de çocuklar için geçerli olacaktır.

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

Bu yöntemi kullanarak: E> F Bir E öğesinin alt öğesi olan herhangi bir F öğesi ile eşleşir.

JQuery'ye yalnızca açık çocukları aramasını söyler. http://www.w3.org/TR/CSS2/selector.html

$("ul li:first-child")Yalnızca UL'nin doğrudan çocuklarını elde etmek için de kullanabilirsiniz .

Yine de kabul ediyorum, ana UL'yi tanımlamak için bir ID'ye veya başka bir şeye ihtiyacınız var, aksi takdirde sadece hepsini seçecektir. UL çevresinde kimliği olan bir div'iniz varsa yapılacak en kolay şey$("#someDiv > ul > li")

Bunu dene:

$("#myId > UL > LI")

İç içe geçmiş sınıflarla herhangi bir derinlikten bazı sorunlar yaşadım, bu yüzden bunu çözdüm. Yalnızca içeren bir Jquery Nesnesinin karşılaştığı ilk düzeyi seçecektir:

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)

muhtemelen başka birçok yol vardır

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

.add_to_cart öğesinden ağaç düzeyindeki ikinci .form öğesi