Durchlaufen der DOM mit jQuery .am nächsten()

Was ich dachte wäre ein leichtes für die .closest() zu behandeln, stellte sich heraus, nicht zu sein (oder vielleicht mache ich einen BLÖDEN Fehler).

Was ich versuche zu tun, ist der Zugang der <label> element aus der <div> mit dem text: I AM HERE:

<li>
    <label>I WANT TO ACCESS THIS ELEMENT</label>
    <div>...</div>
    <div>
        <input/>
        <input/>
        <input/>
        <div id="start">I AM HERE</div>
    </div>
</li>

Meine erste Vermutung wäre gewesen, zu versuchen, diese:

$('#start').closest('label')

Aber nichts zurück.

Wenn .closest() scheint nicht richtig zu arbeiten, warum nicht Blick auf die .closest() doco? Oder die Liste der traversal-Methoden: api.jquery.com/category/traversing/tree-traversal zu finden, eine geeignete Methode...
nnnnnn - ich schaue in die Dokumentation, und das ist, wie ich kam mit meinem test. Die Dokumentation sagt ausdrücklich "Holen Sie sich das erste element entspricht dem Selektor, der Anfang bei dem aktuellen element und schreitet durch den DOM-Baum." Ich dachte, das Etikett ich versuche, Zugriff auf den DOM-Baum.
Gute Frage! Ich habe nicht verwendet closest() noch nicht, aber jetzt weiß ich, ich brauche zu tun. Großartiges Beispiel für seine Verwendung.
Sorry Allen, so viele Leute hier posten, anstatt die doco (oder Google) und ich denke, ich nahm an, Sie waren eine solche. Sorry nochmal. "Durch den DOM-Baum" bedeutet gerade nach oben, nicht seitwärts. I. e., Eltern, Großeltern, Urgroßeltern, etc., aber keine Tanten/Onkel, cousins, Geschwister.
Dank nnnnnn. Ich verstehe, was Sie versuchen zu sagen =) Einige von uns sind nur so gut wie das, was wir verstehen können, aus der docs.

InformationsquelleAutor Allen Liu | 2012-02-23

14

.closest() sieht nur für Vorfahren-Elemente, um die anfängliche Auswahl. Sie wollen eine Kombination von .closest() und .siblings() oder .children():
```
//find closest parent `<li>` element and then find that element's child `<label>` element
$('#start').closest('li').children('label');

//find the closest parent `<div>` element and then find that element's sibling `<label>` element
$('#start').closest('div').siblings('label');
```
Update

Sehr schnell Selektor zu verwenden .prev() zweimal .parent() wie diese:
```
$('#start').parent().prev().prev();
```
- Dank Jasper! Gibt es da große Unterschiede zwischen Ihrer Lösung und der von Kevin (z.B. performance)?
- Jederzeit können Sie entfernen von strings aus Ihrer Selektoren, die Sie ausführen schneller. Der Schnellste selector I zur Verfügung gestellt wurde: $('#start').parent().prev().prev();
- Micro Unterschied. Vergeuden Sie nicht Zeit auf Sie.
- auch ich habe gerade festgestellt, dass Sie Formularfelder wie diese: <input></input, der richtige Weg ist: <input /> (self-closing tag).
- Hier ist ein JSPerf zu zeigen, dass die Verwendung $('#start').parent().prev().prev(); ist doppelt so schnell wie mit anderen Methoden zu integrieren, strings: jsperf.com/jquery-string-selector-vs-function-selector
- Schön, Jasper! =) Vielen Dank für Ihre Hilfe.
- Während .parent().prev().prev() kann, sparen Sie eine Millisekunde oder zwei, es müssen aktualisiert werden, wenn ein element Hinzugefügt wird, dass li nach der label oder wenn #start verschoben wird. Ich denke, das ist der Preis der micro-Optimierung.
- 0.00001 statt 0.00002 ist nicht so interessant. besser verbrachte die Zeit auf die nächste mission...
- Gut gesagt!
- In der Tat. Ich versuche zu bewegen, alle meine string-Selektoren einfacher DOM-traversal-Methoden, wenn ich mich bewege code in der Produktionsumgebung. jQuery Mobile ist ein großartiges Beispiel dafür, wie viel kann dies tun, wenn die 1.0 Final veröffentlicht Sie bewegten sich auf Selektoren wie diese für die performance-Steigerungen von Hunderten von Prozenten auf einigen Plattformen. Und jede einzelne Plattform sagen eine deutliche Zunahme der Leistung...
- Ich bin damit einverstanden, aber Sie haben, um Gewicht zu, die gegen code-Wartbarkeit zu. In der mobilen Umgebung, die Sie haben viel weniger Platz für code Ineffizienz, so dass Mikro-Optimierung ist viel wichtiger. Ich Neige dazu, zu vergessen, über die mobile Umgebung, weil ich nicht bekommen, um zu entwickeln, für die es sehr oft 🙁
- Hier ist der blog-post, wo das jQuery-Mobile-team zeigt die Verbesserung in der Leistung für die 1.0 Final release: jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0. Ich kann nicht finden, wo aber ich habe gelesen, dass es meistens durch Dinge zu tun, wie mit .children() statt .find().
InformationsquelleAutor Jasper
5

.closest findet nur die Eltern der ausgewählten Elemente. Versuchen Sie dies:
```
$("#start").closest("li").children("label");
```
Update

geändert .children, die "> label" selector abgeschrieben.
- Ich werde Sie bitten, die gleiche Frage wie, fragte ich Jasper. Gibt es da große Unterschiede zwischen Ihrer Lösung und der von Jasper (z.B. performance)?
- Anstelle der Verwendung von .find("> label") erfordert mucking um mit Zeichenfolgen, die Sie tun könnten: .children('label') oder sogar schneller .children().first().
- Vielen Dank übrigens =) ich wirklich zu schätzen Ihre Hilfe.
- Keine, die sich lohnen würde, Zeit zu verbringen, es sei denn, Sie sind den Umgang mit einer Schleife gehen Sie durch Hunderte von Elementen. Erstellen Sie einen test auf jsperf.com, wenn Sie betroffen sind. Ich schlage vor, mit welcher man für Sie komfortabler zu Lesen.
- Auch, nur für Mikro-Optimierung Willen .children("label") ist schneller als meine Methode, und meiner Meinung nach einfacher zu Lesen.
InformationsquelleAutor user400654
2

Nächsten beginnen um das aktuelle element und Fortschritt der DOM-Baum, aber da <label> ist nicht ein Elternteil von Ihrem aktuellen Elements, die Sie brauchen, um zu verwenden, 2 findet:
```
 $('#start').closest('li').children('label');
```
Dies ist Ihre effizienteste traversal.

InformationsquelleAutor Highway of Life
0

Ich weiß, das ist alt, aber hier ist der Schnellste Weg ...
```
$('#start').closest('li').find('label');
```
find() verwendet native browser-Methoden children() verwendet JavaScript vom browser interpretiert

InformationsquelleAutor Scotty G

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update