Heim > Artikel > Web-Frontend > Wie wähle ich mit jQuery alle Links innerhalb eines Absatzes aus?

Wie wähle ich mit jQuery alle Links innerhalb eines Absatzes aus?

WBOYnach vorne: 2023-09-14 21:45:03946Durchsuche

如何使用 jQuery 选择段落内的所有链接？

jQuery ist eine beliebte JavaScript-Bibliothek, die das HTML-DOM-Traversal, die Ereignisverarbeitung und die AJAX-Interaktion für eine schnelle Webentwicklung vereinfacht. Es bietet eine breite Palette integrierter Funktionen und Methoden, die Entwicklern dabei helfen, HTML-Elemente, -Stile und -Verhalten dynamisch zu manipulieren.

In diesem Artikel erfahren Sie, wie Sie mit jQuery alle Links innerhalb eines Absatzes auswählen. Die Auswahl von Links innerhalb eines Absatzes ist eine häufige Anforderung, wenn wir Links zu einem bestimmten Teil der Website ändern möchten (z. B. Stil ändern, Links suchen usw.).

Wie wähle ich alle Links innerhalb eines Absatzes aus?

Das Auswählen von Links innerhalb eines Absatzes ist eine häufige Aufgabe, daher gibt es viele Möglichkeiten, alle Links innerhalb eines Absatzes in jQuery auszuwählen. Schauen wir uns einige verschiedene Möglichkeiten zur Auswahl von Links an und sehen wir, wie jQuery diese Aufgabe effizient erledigen und effizienteren und wartbareren Code schreiben kann.

Methode 1: Verwenden Sie die .children()-Methode

Die Methode

.filter() ist eine von jQuery bereitgestellte Methode, mit der Benutzer alle direkten untergeordneten Elemente des ausgewählten Elements zurückgeben können. Um Links innerhalb eines Absatzes auszuwählen, die Ankertags mit dem angegebenen Tag-Namen enthalten, können wir die Children-Methode verwenden. Nachfolgend finden Sie die Syntax, um denselben Zweck zu erreichen.

Grammatik

$("p").children("a").each(function() { 
   // add your styles 
});

Die oben angegebene Syntax wählt zunächst alle Absatzelemente mithilfe der Funktion „$“ aus. Anschließend ruft es die Children()-Methode für jedes Absatzelement auf, um alle davon abgeleiteten Anker-Tags abzurufen. Schließlich wird die Methode every() verwendet, um jeden Link zu durchlaufen und nur die Anker auszuwählen, d. h. -Tags, um Stile hinzuzufügen oder zu ändern oder eine andere Aktion auszuführen.

Beispiel

In diesem Beispiel haben wir eine Schaltfläche „btn1“ definiert, die die Methode .children() verwendet, um alle Anker-Tags auszuwählen, die direkte untergeordnete Elemente eines Absatzes sind. Beim Klicken auf die Schaltfläche wird der JQuery-Code ausgeführt, der alle direkten untergeordneten Elemente des ausgewählten Elements zurückgibt, d. h. in unserem Beispiel den grünen Text „Tutorialspoint“ aus dem Absatz zurückgibt.

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn2").click(function(){
               $("span").children("a").each(function(){
                  $(this).css("color", "violet");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn2">Violet Link</button>
   </body>
</html>

Methode 2: Verwenden Sie die .filter()-Methode

Die Methode

.filter() ist eine von jQuery bereitgestellte Methode, mit der Benutzer ausgewählte Elemente basierend auf bestimmten Bedingungen filtern können. Um innerhalb eines Absatzes Links auszuwählen, die Anker-Tags enthalten, und diese Tags dann abzurufen, müssen wir den Tag-Namen in der filter()-Methode definieren. Nachfolgend finden Sie die Syntax, um denselben Zweck zu erreichen.

Grammatik

$("p").find("*").filter("a").each(function(){
   // add your styles
});

Die oben angegebene Syntax wählt zunächst alle Absatzelemente mithilfe der Funktion „$“ aus. Anschließend ruft es die Methode find() für jedes Absatzelement auf, um alle davon abgeleiteten Ankertags abzurufen. Schließlich wird die Methode filter() verwendet, um mit der Methode every() über jeden Link zu iterieren und nur die Anker auszuwählen, d. h. die Tags, die zum Hinzufügen oder Ändern von Stilen oder zum Ausführen anderer Vorgänge verwendet werden.

Beispiel

In diesem Beispiel definieren wir eine Schaltfläche „btn2“, die die Methode .filter() verwendet, um alle Anker-Tags auszuwählen, die direkte untergeordnete Elemente eines Absatzes sind. Wenn auf die Schaltfläche geklickt wird, wird der JQuery-Code ausgeführt, der alle Links zurückgibt, d. h. in unserem Beispiel wird der violette Text „Tutorialspoint“ aus dem Absatz zurückgegeben.

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn1").click(function(){
               $("p").find("a").each(function(){
                  $(this).css("color", "green");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>

      <button id="btn1">Green Link</button>
   </body>
</html>

Methode 3: Verwenden Sie die .has()-Methode

Die Methode

.has() ist eine von jQuery bereitgestellte Methode, mit der Benutzer Elemente auswählen können, die ein bestimmtes Nachkommenelement haben. Um innerhalb eines Absatzes Links auszuwählen, die Anker-Tags enthalten, und diese Tags dann abzurufen, können wir diese Methode verwenden. Nachfolgend finden Sie die Syntax, um denselben Zweck zu erreichen.

Grammatik

$("p:has(a)").find("a").each(function(){
   // add your styles
});

Die oben angegebene Syntax wählt zunächst alle Absätze aus, die Ankertags enthalten, mithilfe des Selektors :has(). Anschließend ruft es die Methode find() für jedes Absatzelement auf, um alle davon abgeleiteten Ankertags abzurufen. Schließlich wird die Methode every() verwendet, um jeden Link zu durchlaufen, um Stile hinzuzufügen oder zu ändern oder andere Vorgänge auszuführen.

Beispiel

In diesem Beispiel definieren wir eine Schaltfläche „btn3“ mit der Methode .has(). Wenn auf die Schaltfläche geklickt wird, wird der jQuery-Code ausgeführt und die Funktion wählt alle Ankertags aus, die ein bestimmtes untergeordnetes Element haben. Das heißt, es gibt den roten Text „Tutorialspoint“ aus dem Absatz in unserem Beispiel zurück.

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn3").click(function(){
               $("p:has(a)").find("a").each(function(){
                  $(this).css("color", "red");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn3">Red Link</button>
   </body>
</html>

Fazit

Das Auswählen von Links innerhalb von Absätzen ist eine sehr einfache Aufgabe, da es dabei hilft, Links für bestimmte Teile der Webanwendung zu ändern. Wir haben verschiedene Möglichkeiten besprochen, mit jQuery alle Links innerhalb eines Absatzes auszuwählen. Wie besprochen haben wir drei verschiedene Methoden kennengelernt, nämlich die Verwendung der .children()-Methode, der .filter()-Methode und der .has()-Methode, da alle diese Methoden effizient und einfach zu verwenden sind. Insgesamt ist jQuery ein leistungsstarkes Tool, das die HTML-DOM-Durchquerung, die Ereignisverarbeitung und AJAX-Interaktionen für eine schnelle Webentwicklung vereinfacht.

Das obige ist der detaillierte Inhalt vonWie wähle ich mit jQuery alle Links innerhalb eines Absatzes aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery ajax html Filter 事件 dom 选择器

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich ein bewegliches Div mit JavaScript?Nächster Artikel：Wie erstelle ich ein bewegliches Div mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen