Ich habe eine jquery-ähnliche Funktion:
function(elem) {
return $('> someselector', elem);
};
Die Frage ist, wie kann ich dasselbe tun querySelector()
?
Das Problem ist, dass die >
Auswahl in querySelector()
der übergeordneten Angabe explizit angegeben werden muss. Gibt es eine Problemumgehung?
javascript
css-selectors
selectors-api
entlassen
quelle
quelle
Antworten:
Obwohl dies keine vollständige Antwort ist, sollten Sie die W3C Selector API v.2 im Auge behalten, die in den meisten Browsern sowohl auf dem Desktop als auch auf dem Handy bereits verfügbar ist, mit Ausnahme des IE (Edge scheint dies zu unterstützen): Siehe vollständige Supportliste .
quelle
:scope
noch unter Drafts.csswg.org/selectors-4/#the-scope-pseudo angegeben . Bisher wurde nur das<style scoped>
Attribut entfernt. Es ist unklar, ob dies auch zur:scope
Entfernung führen wird (da dies<style scoped>
ein wichtiger Anwendungsfall war:scope
).Das kannst du nicht. Es gibt keinen Selektor, der Ihren Startpunkt simuliert.
Die Art und Weise, wie jQuery dies tut (eher aufgrund eines
qsa
Verhaltens, das nicht ihren Wünschen entspricht), besteht darin, dass sie prüfen, obelem
eine ID vorhanden ist, und wenn nicht, vorübergehend eine ID hinzufügen und dann eine vollständige Auswahlzeichenfolge erstellen.Grundsätzlich würden Sie tun:
Dies ist sicherlich kein jQuery-Code, aber soweit ich mich erinnere, ist es im Grunde das, was sie tun. Nicht nur in dieser Situation, sondern in jeder Situation, in der Sie einen Selektor aus dem Kontext eines verschachtelten Elements ausführen.
Quellcode für Sizzle
quelle
Komplett: Scope Polyfill
Wie avetisk hat genannten Selektoren API 2 verwendet
:scope
Pseudo-Selektor.Damit dies in allen Browsern (die diese unterstützen
querySelector
) funktioniert , ist hier die PolyfüllungVerwendung
Aus historischen Gründen meine bisherige Lösung
Basierend auf allen Antworten
Verwendung
quelle
Date.now()
wird von älteren Browsern nicht unterstützt und könnte durchnew Date().getTime()
Wenn Sie den Tag-Namen des Elements kennen, das Sie untersuchen, können Sie ihn im Selektor verwenden, um das zu erreichen, was Sie möchten.
Zum Beispiel, wenn Sie ein haben
<select>
, das<option>
s und hat<optgroups>
, und Sie nur das<option>
s wollen, das seine unmittelbaren Kinder sind, nicht die darin<optgoups>
:Wenn Sie also einen Verweis auf das ausgewählte Element haben, können Sie - überraschenderweise - seine unmittelbaren Kinder wie folgt erhalten:
Es scheint in Chrome, Safari und Firefox zu funktionieren, wurde jedoch nicht in IEs getestet. = /
quelle
<ul id="start"> <li>A</li> <li> <ul> <li>b</li> <li>c</li> </ul> </li> </ul> var result = document.getElementById('start').querySelectorAll('ul>li');
-> Alle 4 li Elemente werden ausgewählt!<select>
Elemente in demselben Elternteil gab.Wenn Sie eventuell direkte Kinder finden möchten (und nicht zB
> div > span
), können Sie Element.matches () ausprobieren :quelle
ANSPRUCH
Persönlich würde ich die Antwort von Patrick Dw nehmen und +1 seine Antwort, meine Antwort ist für die Suche nach einer alternativen Lösung. Ich denke nicht, dass es eine Ablehnung verdient.
Hier ist mein Versuch:
siehe http://jsfiddle.net/Lgaw5/8/
quelle
querySelector
, was bedeutet, dass:eq()
es nicht verwendet werden kann. Selbst wenn dies möglich wäre, würde Ihr Selektor das Element, das:eq()
auf der Seite angezeigt wird, und nicht:eq()
den Index des übergeordneten Elements (wo Sie das erhaltenidx
) zurückgeben.elem
ist bei Index 4, aber es gibt ein vorheriges Geschwister, das ein anderes hattagName
, aber es hat ein Element mit dem passendentagName
Element darin verschachtelt. Dieses verschachtelte Element wird in die Ergebnisse aufgenommen, bevor das Element, auf das Sie abzielen, erneut abgeworfen wird Der Index. Hier ist ein Beispiel$('> someselector', elem);
; o)Das hat bei mir funktioniert:
Sie müssen das @ dieses Schlüssels vor dem> übergeben, wenn Sie nach unmittelbaren Kindern suchen möchten.
quelle
Das Folgende ist eine vereinfachte, generische Methode zum Ausführen einer CSS-Selektorabfrage nur über direkte untergeordnete Abfragen. Sie berücksichtigt auch kombinierte Abfragen wie
"foo[bar], baz.boo"
:quelle
Es gibt eine abfragebezogene Bibliothek, die ein praktischer Ersatz für die Abfrageselektion ist . Es füllt den Kinder-Selektor
'> *'
und:scope
(inkl. IE8) mehrfach aus und normalisiert den:root
Selektor. Außerdem stellt es einige spezielle relativ pseudos wie:closest
,:parent
,:prev
,:next
, für alle Fälle.quelle
Überprüfen Sie, ob das Element eine andere ID hat. Fügen Sie eine zufällige ID hinzu und suchen Sie danach
wird das Gleiche tun wie
quelle