Вибір лише елементів першого рівня в jquery

Як я можу вибрати елементи посилання лише з батьків <ul>із такого списку?

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

Так у css ul li a, але ніul li ul li a

Дякую

$("ul > li a")

Але вам потрібно встановити клас на кореневій ul, якщо ви спеціально хочете націлити на самий зовнішній ul:

<ul class="rootlist">
...

Тоді це:

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

Ще один спосіб переконатися, що у вас є лише елементи root li:

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

Це виглядає дивовижно, але варто зробити трюк

Після того, як у вас є початковий ul, ви можете використовувати метод дітей () , який буде враховувати лише безпосередніх дітей елемента. Як вказує @activa, одним із способів легко вибрати кореневий елемент - це надати йому клас або ідентифікатор. Далі передбачається, що у вас є root root з ідентифікатором root.

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

Як зазначено в інших відповідях, найпростіший метод - це однозначна ідентифікація кореневого елемента (за ідентифікатором або іменем класу) та використання селектора прямого нащадка.

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

Однак я зіткнувся з цим питанням у пошуках рішення, яке б працювало над неназваними елементами на різній глибині DOM.

Цього можна досягти, перевіривши кожен елемент та переконавшись, що він не має батьківського елемента у списку відповідних елементів. Ось моє рішення , загорнене в селектор 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;
  }
});

Використовуючи це, рішення оригінальної публікації:

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

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

Повний jsFiddle доступний тут .

Просто ви можете скористатися цим ..

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

Див. Приклад: https://codepen.io/gmkhussain/pen/XzjgRE

Можливо, ви захочете спробувати це, якщо результати все-таки перейдуть до дітей, у багатьох випадках JQuery все одно стосуватиметься дітей.

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

Використовуючи цей метод: E> F Збирає будь-який елемент F, який є дочірнім елементом Е.

Розповідає JQuery шукати лише явних дітей. http://www.w3.org/TR/CSS2/selector.html

Ви також можете використовувати $("ul li:first-child")лише прямих дітей ВНЗ.

Але я погоджуюсь, вам потрібен ідентифікатор або щось інше, щоб визначити основний UL, інакше він просто відбере їх усіх. Якби у вас був div з ідентифікатором навколо UL, найлегше це було б зробити$("#someDiv > ul > li")

Спробуйте це:

$("#myId > UL > LI")

У мене були проблеми з вкладеними класами з будь-якої глибини, тому я зрозумів це. Він вибере лише перший рівень, з яким він стикається, що містить об'єкт 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>

1

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

можливо, існує багато інших способів

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

другий .form-елемент на рівні дерева на рівні доріжки .add_to_cart