In jquery nur Elemente der ersten Ebene auswählen

93

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

Erstaunen
quelle

Antworten:

108
$("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

Philippe Leybaert
quelle
Hmm, ich habe festgestellt, dass mein Problem bei der Verwendung von jquery 1.2 liegt. Ich habe es durch 1.3 ersetzt und diese Art von Selektoren funktionieren jetzt einwandfrei. Vielen Dank für Ihre Antwort und alle, die geantwortet haben.
Aston
Wenn Sie keine Klasse hinzufügen möchten, tun Sie einfach $ ("ul: first> li a"). Dies würde natürlich nur für die erste Ebene funktionieren, nicht für die inneren Ebenen.
Alfonso
Vielen Dank für Ihren Tipp. Ich habe dies auch getestet, und es scheint, dass es gut funktioniert: ul.find(">li");Wenn Sie den Knoten "ul" als JQuery-Objekt in der Variablen ul haben.
John Boe
55

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');
Tvanfosson
quelle
2
Danke, es ist sehr hilfreich für mich. Ein $('ul').first().children('li')kann auch verwendet werden
Ivan Black
Dies ist die bevorzugte Antwort für mich, da ich das Element bereits habe und daher .children anstelle von .find verwende.
Herbert Van-Vliet
7

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 .

Courtney Christensen
quelle
Durch die Verwendung neuer DOM-Methoden können Sie die Leistung von :topmost- try using erheblich verbessern .parentElement.closest(selector). Wie immer, IE + Rand die einzigen sind , nicht , sie zu unterstützen> :-( so ist hier ein polyfill pastebin.com/JNBk77Vm
oriadam
5

Einfach können Sie dies verwenden ..

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

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

GMK Hussain
quelle
3

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

TitanKing
quelle
0

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

CBarr
quelle
3
Dies ist eine falsche Verwendung von :first-child. Dadurch wird der "Erste livon jedem ul" ausgewählt. Der ursprüngliche Beitrag verlangte nach "jedem livon Anfang an ul".
Courtney Christensen
0

Versuche dies:

$("#myId > UL > LI")
Lebnik
quelle
0

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>

Shawn Dotey
quelle
0

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

Arlan T.
quelle
-1
.add_to_cart >>> .form-item:eq(1)

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

isidoro
quelle
1
Dies macht nicht einmal Sinn für die Frage
Renke
>>> Was ist das? Hat dieser Selektor einen Namen? Ist es überhaupt ein gültiger Selektor? Oder war es ein Witz?
John Boe