Frage Nur Elemente der ersten Ebene in jquery auswählen


Wie kann ich die Verknüpfungselemente nur des übergeordneten Elements auswählen? <ul> von einer Liste wie dieser?

<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 nicht ul li ul li a

Vielen Dank


76
2018-06-10 20:11


Ursprung


Antworten:


$("ul > li a")

Aber Sie müssten eine Klasse für die Wurzel ul setzen, wenn Sie speziell auf die äußerste ul abzielen wollen:

<ul class="rootlist">
...

Dann ist es:

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

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

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

Es sieht klatschig aus, aber es sollte den Trick machen


90
2018-06-10 20:14



Sobald Sie die ursprüngliche ul haben, können Sie die verwenden Kinder() Methode, die nur die unmittelbaren Kinder des Elements berücksichtigt. Wie @activa hervorhebt, kann man das Wurzelelement leicht auswählen, indem man ihm eine Klasse oder eine ID gibt. Im Folgenden wird angenommen, dass Sie eine Root-UL mit ID haben root.

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

44
2018-06-10 20:21



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

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

Ich stieß jedoch auf diese Frage auf der Suche nach einer Lösung, die funktionieren würde ungenannte Elemente beim unterschiedliche Tiefen des DOM.

Dies kann erreicht werden, indem Sie jedes Element überprüfen und sicherstellen, dass es kein übergeordnetes Element in der Liste der übereinstimmenden Elemente enthält. Hier ist mein Lösung, verpackt in einem jQuery-Selektor "top".

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

Die Lösung für den ursprünglichen Beitrag ist:

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

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

Vollständige jsFiddle verfügbar Hier.


7
2018-01-11 14:28



Sie können dies versuchen, wenn die Ergebnisse immer noch an die untergeordneten Elemente übergeben werden. In vielen Fällen wird JQuery weiterhin auf untergeordnete Elemente angewendet.

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

Mit dieser Methode: E> F Entspricht einem F-Element, das ein Kind eines Elements E ist.

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


3
2018-06-10 09:01



Einfach kannst du das verwenden ..

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

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


2
2017-11-07 10:01



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

Ich stimme jedoch zu, Sie brauchen eine ID oder etwas anderes, um die Haupt-UL zu identifizieren, sonst wird sie nur alle auswählen. Wenn du ein div mit einer ID um das UL hättest, wäre es am einfachsten$("#someDiv > ul > li")


0
2018-06-10 21:48



Versuche dies:

$("#myId > UL > LI")

0
2017-10-28 16:43



Ich hatte Probleme mit verschachtelten Klassen aus jeder Tiefe, also habe ich das herausgefunden. Es wird nur die erste Ebene ausgewählt, auf die es von einem enthaltenden Jquery-Objekt trifft:

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>


0
2018-05-01 16:17



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


0
2018-04-27 15:54



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

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


-1
2017-07-13 20:43