it-swarm.com.de

Nur Elemente der ersten Ebene in Jquery auswählen

Wie kann ich aus einer solchen Liste nur die Link-Elemente des übergeordneten <ul> 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 nicht ul li ul li a

Vielen Dank

86
aston
$("ul > li a")

Sie müssen jedoch eine Klasse auf der Wurzel ul setzen, 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, sicherzustellen, dass Sie nur über die Stammelemente li verfügen:

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

Es sieht kludig aus, aber es sollte den Trick tun

101

Sobald Sie die anfängliche ul haben, können Sie die Methode children () verwenden, die nur die unmittelbaren Kinder des Elements berücksichtigt. Wie @activa hervorhebt, besteht eine Möglichkeit, das Stammelement einfach auszuwählen, darin, ihm eine Klasse oder eine ID zuzuweisen. Im Folgenden wird davon ausgegangen, dass Sie über eine Wurzel ul mit der ID root verfügen.

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

Wie bereits in anderen Antworten erwähnt, besteht die einfachste Methode darin, das Stammelement (anhand der ID oder des Klassennamens) eindeutig zu identifizieren und den direkten Abwärtsselektor zu verwenden.

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

Auf diese Frage stieß ich jedoch auf der Suche nach einer Lösung, die an unbenannten Elementen am unterschiedlichen Tiefen des DOM arbeiten würde.

Dies kann erreicht werden, indem jedes Element überprüft wird und sichergestellt wird, dass in der Liste der übereinstimmenden Elemente kein übergeordnetes Element vorhanden ist. Hier ist meine Lösung , die in einem jQuery-Selector 'topmost' eingeschlossen ist.

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

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

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

Komplettes jsFiddle verfügbar hier .

Sie können dies einfach verwenden .. 

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

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

3
GMK Hussain

Möglicherweise möchten Sie dies versuchen, wenn die Ergebnisse immer noch auf untergeordnete Elemente übertragen werden. In vielen Fällen gilt JQuery weiterhin für untergeordnete Elemente.

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

Verwenden Sie diese Methode: E> F Stimmt mit jedem F-Element überein, das ein untergeordnetes Element eines Elements E ist.

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

3
TitanKing

Versuche dies:

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

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

Ich stimme jedoch zu, Sie benötigen eine ID oder etwas anderes, um den Haupt-UL zu identifizieren. Andernfalls werden nur alle ausgewählt. Wenn Sie ein Div mit einer ID um den UL hätten, wäre das am einfachsten zu tun: $("#someDiv > ul > li")

0
Chris Barr

Ich hatte einige Probleme mit verschachtelten Klassen aus jeder Tiefe, also habe ich das herausgefunden. Es wird nur die erste Ebene ausgewählt, auf die es ein 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
Shawn Dotey

 $("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
Arlan T