Beispiel für eine untergeordnete JQuery-Auswahl

Der untergeordnete JQuery-Selektor wählt alle Elemente aus, die untergeordnete Elemente des übergeordneten Elements im Satz übereinstimmender Elemente sind. Es stellt das untergeordnete Element dar, das vom Selektor abgerufen wird. Es wählt alle untergeordneten Elemente aus, die vom übergeordneten Selektor definiert werden. Der untergeordnete Selektor sucht nach untergeordneten Elementen in der Struktur des Dokumentobjektmodells und erstellt aus dem Satz übereinstimmender Elemente ein neues Objekt. Der untergeordnete Selektor akzeptiert die Elemente desselben Typs, die wir an die Funktion $() übergeben können. Es wird mit dem Größer-als-Zeichen (>) geschrieben und muss zwischen zwei anderen Selektoren stehen.

JQuery-Syntax für untergeordnete Selektoren

(“parent>child”)

Der Parameter „parent“ ist ein erforderlicher Parameter, der einen gültigen übergeordneten Selektor definiert, der das auszuwählende übergeordnete Element definiert, und „child“ ist ein erforderlicher Parameter, der das auszuwählende untergeordnete Element definiert.

Beispiel für eine untergeordnete JQuery-Auswahl

<!doctype html>
<head>
<title>JQuery Child Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Child Selector Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $( "div.myclass > span" ).css("border","2px groove orange");
   });
</script>
<body>
   <div  >
      <span>This is first span.
      <span>This is second span.</span>
      </span>
   </div>
   <span>This is third span.</span>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $( „div.myclass > span“ ).css(“border“,“2px Groove Orange“); Zeile definiert einen untergeordneten Selektor, der die Elemente auswählt, die direkte untergeordnete Elemente des angegebenen Elements sind. Es werden nur die Elemente abgeglichen, die mit dem zweiten Selektor übereinstimmen und Kinder von Elementen sind, mit denen der erste Selektor übereinstimmt.
  • Wenn wir das obige Skript ausführen, werden die übereinstimmenden Elemente mit gerilltem Rand und oranger Farbe angezeigt.

JQuery Child Selector-Demo

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Child Selector-Demo aus

Beispiel für eine untergeordnete JQuery-Auswahl

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen