WThere gibt ein paar Möglichkeiten zu ändern, bereits vorhandene HTML-Elemente mit jQuery, je nachdem, was Sie ändern möchten. Zum Beispiel, sagen Sie den Text der Elemente auf der Seite, die Sie gerade gearbeitet ändern wollte.

Statt jedes Element "Hier," Sie wollen, dass es zu sagen, sagen zu müssen "Item". Sie könnten eine ID zu jedem Element hinzufügen und dann den HTML mit der Änderung html () oder der Text() Funktion. Aber das scheint wie eine Menge Arbeit. Und es entsteht ein anderes Problem, wenn die HTML irgendwo auf dem Weg ändert.

Ein anderer Weg ist durch jede der Listenelemente Schleife und ändern Sie sie. jQuery hat seine eigene Art und Weise in einer Schleife, die so genannte jeder(). Das jeder() Loop-Verfahren hat einen Vorteil gegenüber der während und für Schleifen: Die jeder() Funktion kann mit jQuery verwendet werden, so dass Sie den vollen Nutzen aus allen jQuery-Funktionen und Sie können Kette der jeder() Funktion mit anderen jQuery-Funktionen.

Verkettung ist der Begriff, mit jQuery verwendet, um zu beschreiben, was Sie tun, wenn Sie Funktionen mit Punkten verbinden, um die Funktion gelten für die Kette zu machen.

Mit nur zwei Elemente zu ändern, würden Sie wahrscheinlich tun dies nur im HTML selbst, aber dieses Beispiel zeigt den Prozess und Funktionen für HTML zu ändern, so dass Sie es verwenden können, wenn Sie es wirklich brauchen.

Diese Auflistung zeigt die HTML und javascript für dieses Beispiel.

 
Hinzufügen von HTML
Hier ist 1
 
 
Hier ist 2

Die javascript und jQuery hier zeigt ein paar neue Dinge, so auf den Code ein wenig näher betrachten.

Die erste Zeile des neuen Codes ist dies:

$ ( "# TheList li"). Each (function () {

Diese Linie verwendet einen Selektor alle Elemente innerhalb der ID zu finden die Liste. Das ist ein wenig anders als die anderen Selektoren Sie sehen und stellt dar, wie jQuery der Seite Hierarchie verwenden können nur die Elemente zuzugreifen, die Sie wollen.

Das jeder() Funktion wird auf den Selektor geändert und setzt eine anonyme Funktion auf. Zu diesem Zeitpunkt wissen Sie, dass der Code beginnt in der ID durch jedes Element Schleifen von die Liste.

Die nächste Codezeile sieht wie folgt aus:

Var. ExistingText = $ (this) .text () substr (7,1) -

Mit diesem Code wird eine einfache javascript-Variable auf, existingText, und setzt ihn gleich dem Ergebnis der $ (This) .text (). Substr (7,1). Aber was ist das, oder besser gesagt, $ (This)? Der besondere Selektor $ (This) bezieht sich auf das aktuelle Element gearbeitet wird. javascript ein Äquivalent genannt Dies, aber Sie wollen die jQuery-Version, so dass Sie es in dem Dollarzeichen wickeln / Klammern Notation.

Das $ (This) Selektor ist mit dem jQuery gekettet Text() Funktion, die die Elemente Text, ohne HTML-Markup abruft, nur den Text. Das Text() Funktion wird dann an die verketteten substr () Funktion. Das substr () Funktion packt eine Teil, oder einen Teil eines String und gibt ihn zurück.

In diesem Fall Sie wollen substr () Sie ein einzelnes Zeichen zurück an der siebten Position beginnen. Sie können dies tun, weil Sie wissen, dass jedes Element mit dem Wort beginnt Hier gefolgt von einem Leerzeichen, wie folgt aus:

Hier ist 1

Zählen Zeichen von links, gibt es sechs Zeichen in Hier plus ein Zeichen für den Raum. Das macht sieben, so dass Sie am Ende mit substr (7,1). Zugegeben, bricht dies, wenn Sie zu zehn Elemente bekommen, weil du bist nur ein einzelnes Zeichen zurück.

Sie könnten diese Phantasie, indem sie einen regulären Ausdruck, die man nicht wirklich Zeit noch damit verbracht haben, so für dieses Beispiel, es lassen wie es ist. Okay, wenn Sie wissen müssen, könnten Sie ersetzen die substr () Funktion mit dem Spiel() funktionieren, und es würde wie folgt aussehen:

var existingText = $ (this) .text () Spiel (/ [d] /). -

Zurück zur Realität und dem Beispiel sieht die letzte Zeile Code wie folgt aus:

$ (This) .text ( "Item" + existingText) -

Diese Zeile ruft einfach die Text() Funktion, sondern Text zurückzukehren, diesmal setzen Sie es "Item" + existingText. Denn Sie haben die Anzahl der Artikel in der Variablen existingText, es ist, wie Sie es sind anhängt.

Eine Seite in einem Browser aussieht wie dieser.