JQuery findet das erste übergeordnete Element mit einem bestimmten Klassenpräfix

123

Ich möchte das erste übergeordnete Element erhalten, das ein bestimmtes Klassenpräfix hat. Nehmen wir an:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Zum Beispiel ist mein aktuelles Element #dividund ich möchte das erste Element finden, das das Klassenpräfix div-a hat. Im Grunde wird es also auswählen:

<div class="div-a89892">
jquery jquery-selectors Zeitreise
quelle
6
Halt. Verwenden Sie mehrere Klassen, anstatt Informationen in einer Klasse zu kombinieren. Der 'Matching'-Selektor ist langsam und dieses Design lässt sich nicht für Änderungen skalieren. <div class='a'>, dann geben Sie Regeln für div.a. Ich weiß eigentlich nicht, warum Sie divden Klassennamen überhaupt eingeben.
Stefan Kendall
2
Führen Sie dennoch keine Daten in Klassenpräfixe zusammen. Dies ist ein schreckliches Muster, das mit mehreren Klassen leicht behoben werden kann.
Stefan Kendall
17
@StefanKendall: Manchmal haben Sie es mit dem Mist von Drittanbietern zu tun, und manchmal unterstützen Sie ältere Apps, die Sie nicht schnell reparieren können. Schlechtes Design ist eine Tatsache des Lebens, und dies ist eine absolut legitime Frage.
Nerdmaster

Antworten:

221

Verwendung .closest()mit einem Selektor:

var $div = $('#divid').closest('div[class^="div-a"]');
Matt Ball
quelle
Übrigens keine Ahnung, warum dies abgelehnt wurde. Der Klasse-Präfix Selektor ist spröde, aber es wird funktionieren.
Matt Ball
Zu OP: Stellen Sie sicher, dass das gesuchte Element ein übergeordnetes Element irgendwo im DOM-Baum ist und kein Geschwister oder ähnliches Objekt, nach dem Sie suchen (gemäß Dokumentation). Es ist nicht "am nächsten im Dokument", sondern "am nächsten durch Aufarbeiten des DOM-Baums".
Christian P.
Funktioniert bei mir nicht Außerdem möchte ich das erste Element finden, das ein bestimmtes Präfix hat und kein div-Element sein muss.
Zeitreise
@Time dann entfernen Sie die divElementauswahl : $('#divid').closest('[class^="div-a"]'). Wie @Stefan jedoch kommentierte, sollten Sie wirklich mehrere Klassen verwenden.
Matt Ball
3
Dieser Selektor benötigt eine absurde Anzahl von Zyklen (kann aber immer noch schnell sein). Wenn Sie IE6, IE7 oder IE8 unterstützen müssen, kann dies Sie wirklich verarschen, wenn Ihr DOM zu groß wird. IE ruft den Dialog "Skript reagiert nicht" auf, wenn eine bestimmte Anzahl von JS VM-Anweisungen ausgeführt wird, und NICHT nach einer bestimmten Zeit. Ich habe Skripte gesehen, die aus genau diesem Grund im 0.1ms Crash Internet Explorer abgeschlossen wurden.
Stefan Kendall
56

Mit Jquery konnten Sie später die Eltern mit der .parents()Methode finden.

Daher empfehle ich: 

var $div = $('#divid').parents('div[class^="div-a"]');

Dies gibt alle übergeordneten Knoten an, die mit dem Selektor übereinstimmen. Um das erste übergeordnete Element mit dem Selektor abzugleichen, verwenden Sie:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Weitere Informationen zu solchen DOM-Durchquerungsabfragen finden Sie in der Dokumentation zum Durchlaufen des DOM .

Sunny R Gupta
quelle
Die Antwort ist nicht irreführend, sie zeigt lediglich eine andere Alternative zu .closest (), .parents () sieht besser lesbar aus und ist eine weitere Lösung für das Problem.
Sunny R Gupta
9
Am nächsten ist eine bessere Lösung als diese, da der Nächste nur die erste Übereinstimmung findet, während die Eltern ALLE Übereinstimmungen im DOM finden. Offensichtlich effizienter, um am nächsten zu verwenden, obwohl ich damit einverstanden bin, ist es nicht die am besten benannte Funktion.
Mog0
1
Komischerweise habe ich diese Lösung verwendet, da .parentsUtil () nicht wie erwartet funktionierte.
Mark Handy