Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Mehrere gute Möglichkeiten, Geschwisterelemente mit jQuery_jquery abzurufen

Mehrere gute Möglichkeiten, Geschwisterelemente mit jQuery_jquery abzurufen

WBOY
Freigeben： 2016-05-16 16:46:59
Original
1508 Leute haben es durchsucht

Wenn Sie die Geschwisterelemente eines bestimmten Elements abrufen möchten, können Sie den benachbarten Geschwisterkombinator () verwenden, bei dem beide Seiten des Inhalts Selektorausdrücke sind.
Wenn Sie im folgenden Beispiel alle direkten Geschwisterelemente h2 von h1 erhalten möchten

Code kopieren Der Code lautet wie folgt:


< h1>Haupttitel

Abschnittstitel


Einige Inhalte...

;

Weitere Inhalte ...




Sie können es direkt verwenden


Code kopieren Der Code lautet wie folgt:
$('h1 h2')
// ALLE h2-Elemente auswählen, die benachbart sind Geschwister von H1-Elementen


Wenn Sie die Geschwisterelemente von h1 filtern möchten, können Sie natürlich auch


Kopieren Sie den Code Der Code lautet wie folgt:
$ ('h1').siblings('h2,h3,p');
// Alle H2, H3, auswählen und P-Elemente, die Geschwister von H1-Elementen sind


Wenn Sie alle Geschwisterelemente nach dem aktuellen Element erhalten möchten, können Sie nextAll()
beispielsweise für den folgenden HTML-Code verwenden


Kopieren Sie den Code Code wie folgt:
  • ;Erster Artikel

  • Zweiter Artikel

  • Dritter Artikel
    • li>
  • Fünfter Eintrag




    • Wenn Sie alle li-Elemente nach dem zweiten Eintrag erhalten möchten, können Sie Folgendes verwenden Code


    Kopieren Sie den Code Der Code lautet wie folgt: $('li.selected' ).nextAll('li');

    Das obige Beispiel kann auch mit dem allgemeinen Geschwisterkombinator (~) implementiert werden


    Code kopierenDer Code lautet wie folgt: $('li.selected ~ li');

    Um direkte Geschwisterelemente zu erhalten, müssen Sie kann next() auch direkt verwenden, ohne den Selektor zu verwenden.


    Code kopieren Der Code lautet wie folgt: var topHeaders = $('h1') ;
    topHeaders.next('h2').css('margin', '0);
    Verwandte Etiketten：
    兄弟元素
    Quelle：php.cn
    Vorheriger Artikel：Einheitsauswahl-Merge-Farbbeispiel code_jquery Nächster Artikel：Lernen Sie Nodejs von mir (3) --- Node.js module_javascript-Kenntnisse
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...
    Aus 2024-04-06 20:45:26
    0
    2
    386
    Das Eingabeelement konnte nicht von der Website abgerufen werden Ich versuche also, ein Eingabeelement von Twitter abzurufen, aber wenn ich es ausführe, er...
    Aus 2024-04-06 18:59:57
    0
    1
    442
    Methode der obersten Ebene zum Ersetzen einer Zeichenfolge durch HTML-Code (aus einem Array generiert) Gegeben eine Zeichenfolge wie diese...$htmlPattern="Usernameis:#name#andusercompanyis...
    Aus 2024-04-06 17:40:41
    0
    2
    410
    Ungültiges untergeordnetes React-Element (gefunden: Objekt mit Schlüssel {clientVersion}). Wenn Sie eine Sammlung untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array Ich habe ein mehrstufiges Formular und wenn ich versuche, es abzusenden, wird dieser Fehle...
    Aus 2024-04-06 16:25:39
    0
    1
    346
    JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
    Aus 2024-04-06 15:35:24
    0
    1
    274
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage