In jquery nur Elemente der ersten Ebene auswählen

Wie kann ich die Linkelemente nur des übergeordneten Elements <ul>aus einer solchen Liste auswählen ?

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

Also in CSS ul li a, aber nichtul li ul li a

Vielen Dank

$("ul > li a")

Sie müssten jedoch eine Klasse für die Root-Ul festlegen, wenn Sie speziell auf die äußerste Ul abzielen möchten:

<ul class="rootlist">
...

Dann ist es:

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

Eine andere Möglichkeit, um sicherzustellen, dass Sie nur die Root-Li-Elemente haben:

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

Es sieht klobig aus, aber es sollte den Trick machen

Sobald Sie die anfängliche ul haben, können Sie die child () -Methode verwenden, die nur die unmittelbaren untergeordneten Elemente des Elements berücksichtigt. Wie @activa hervorhebt, besteht eine Möglichkeit, das Stammelement einfach auszuwählen, darin, ihm eine Klasse oder eine ID zu geben. Im Folgenden wird davon ausgegangen, dass Sie eine Root-Ul mit der ID haben root.

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

Wie in anderen Antworten angegeben, besteht die einfachste Methode darin, das Stammelement (anhand der ID oder des Klassennamens) eindeutig zu identifizieren und den direkten absteigenden Selektor zu verwenden.

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

Ich bin jedoch auf diese Frage gestoßen, als ich nach einer Lösung gesucht habe, die mit unbenannten Elementen in unterschiedlichen Tiefen des DOM funktioniert .

Dies kann erreicht werden, indem jedes Element überprüft wird und sichergestellt wird, dass die Liste der übereinstimmenden Elemente kein übergeordnetes Element enthält. Hier ist meine Lösung , eingewickelt in einen jQuery-Selektor 'topmost'.

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

Auf diese Weise lautet die Lösung für den ursprünglichen Beitrag:

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

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

Komplette jsFiddle finden Sie hier .

Einfach können Sie dies verwenden ..

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

Siehe Beispiel: https://codepen.io/gmkhussain/pen/XzjgRE

Möglicherweise möchten Sie dies versuchen, wenn die Ergebnisse immer noch an Kinder weitergegeben werden. In vielen Fällen gilt JQuery weiterhin für Kinder.

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

Mit dieser Methode: E> F Entspricht jedem F-Element, das einem Element E untergeordnet ist.

Weist JQuery an, nur nach expliziten untergeordneten Elementen zu suchen. http://www.w3.org/TR/CSS2/selector.html

Sie können auch verwenden, $("ul li:first-child")um nur die direkten Kinder des UL zu erhalten.

Ich stimme jedoch zu, dass Sie eine ID oder etwas anderes benötigen, um die Haupt-UL zu identifizieren, andernfalls werden nur alle ausgewählt. Wenn Sie einen Div mit einem Ausweis um die UL hätten, wäre das am einfachsten$("#someDiv > ul > li")

Versuche dies:

$("#myId > UL > LI")

Ich hatte einige Probleme mit verschachtelten Klassen aus jeder Tiefe, also habe ich das herausgefunden. Es wird nur die erste Ebene eines enthaltenden Jquery-Objekts ausgewählt:

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)

Es gibt wahrscheinlich viele andere Möglichkeiten

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

das zweite .form-Element auf Baumebene untergeordnetes Element aus dem .add_to_cart