jquery ersetzt li-Inhalt-Front-End-Fragen und Antworten-php.cn

jquery ersetzt li-Inhalt

WBOY

Freigeben： 2023-05-08 21:20:36

Original

770 Leute haben es durchsucht

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die zur Vereinfachung der Bearbeitung von HTML-Dokumenten und der Ereignisverarbeitung verwendet wird. Eine der häufigsten Operationen besteht darin, den Inhalt eines HTML-Listenelements (li) zu ersetzen. In diesem Artikel erklären wir ausführlich, wie Sie diese Operation mit jQuery abschließen.

Zuerst benötigen wir ein einfaches HTML-Dokument, das eine ungeordnete Liste enthält, wobei jedes Listenelement Textinhalt enthält. Hier ist ein Beispiel-HTML-Dokument:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
</body>
</html>

Nach dem Login kopieren

Im obigen HTML-Code haben wir einen jQuery CDN (Content Delivery Network)-Link eingefügt. Über diesen Link können wir JavaScript-Code lokal mit jQuery schreiben.

Jetzt schreiben wir etwas jQuery-Code, um den Inhalt des zweiten Listenelements zu ersetzen. Zuerst müssen wir dem zweiten Listenelement ein eindeutiges ID-Attribut hinzufügen, damit wir in jQuery darauf verweisen können. Hier ist der Beispielcode zum Hinzufügen des ID-Attributs zum zweiten Listenelement: Nur ausführen, nachdem das Dokument geladen wurde. Anschließend verwenden wir den Selektor $('#list-item-2'), um das Listenelement mit der ID „list-item-2“ auszuwählen und dessen Inhalt mithilfe der Methode html() durch den „replaced content“ zu ersetzen.

Jetzt werden wir sehen, dass der Text des zweiten Listenelements durch „ersetzter Inhalt“ ersetzt wurde.

Wenn wir den Inhalt mehrerer Listenelemente gleichzeitig ersetzen möchten, können wir die every()-Methode von jQuery verwenden. Hier ist ein Beispielcode zum Ersetzen des Inhalts des 2. und 4. Listenelements durch neuen Text:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li id="list-item-2">列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
  <script>
    $(document).ready(function() {
      $('#list-item-2').html('替换后的内容');
    });
  </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code erstellen wir eine neue Variable „newItemText“, die den zu ersetzenden Text enthält. Anschließend wählen wir das 2. und 4. Listenelement mit dem Selektor $('#list-item-2, #list-item-4') aus und führen die Funktion für jede Übereinstimmung mit der Methode .each() aus. In dieser Funktion ersetzen wir den Inhalt des Listenelements durch neuen Text.

Zusammenfassend haben wir in diesem Artikel gelernt, wie man den Inhalt von HTML-Listenelementen (li) mithilfe von jQuery ersetzt. Unabhängig davon, ob Sie ein einzelnes Listenelement oder mehrere Listenelemente gleichzeitig ersetzen, können Sie dazu die Methoden html() und every() von jQuery verwenden. Jetzt können wir Elemente in HTML-Dokumenten einfach bearbeiten, um unseren Benutzern ein besseres Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonjquery ersetzt li-Inhalt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!