Oft müssen Sie Text mit jQuery hinzufügen. Dies ist sehr einfach mit der Methode text() möglich. Diese Methode kann auf drei Arten verwendet werden: 

  • text() – gibt Text zurück; 
  • text(myText) – Ersetzt; 
  • text(Funktion (Index, Wert)) – macht die Ersetzung entsprechend der Funktion. 

   Betrachten Sie nun jede Option detaillierter und mit Beispielen.

Text() – Text abrufen

   Im folgenden Beispiel wird der Fall betrachtet, in dem das ausgewählte Element nur ein internes Element mit Textinformationen aufweist.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
    // Suchen Sie das Element mydiv und geben Sie die Variable myText-Textinformation 
    // ein, die sich innerhalb des ausgewählten Elements befindet.
  var myText = $('#mydiv').text();
  
  // Drucken Sie die Variable myText mit dem Tag aus id="result"
  $('#result').html(myText);
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  <!-- Variable Ausgabe-Tag myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

   Bei der Ausführung dieses Codes erhalten wir den Code:

<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  // Orange Hintergrund für Ausgabeblock hinzugefügt
  <div id="result" style="background-color: orange;">
           Text-1
  </div>
</body>

   Wenn der ausgewählte Block mehrere Elemente mit Textinformationen enthält, gibt die Methode text () eine Zeichenfolge zurück, in der die Textinformationen der verschiedenen Elemente durch Leerzeichen getrennt werden. Unten ist der Code für diesen Fall.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
   // Suchen Sie das Element #mydiv und geben Sie die Variable myText-Textinformation 
   // ein, die sich innerhalb des ausgewählten Elements befindet.
  var myText = $('#mydiv').text();
  
  // Выводим переменную myText в тег с id="result"
  $('#result').html(myText);
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<p>Text-3</p>
  </div>
  
  <!-- Variable Ausgabe-Tag myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

Das Ergebnis davon ist:

  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<p>Text-3</p>
  </div>
  
  <!-- Variable Ausgabe-Tag myText -->
  <div id="result" style="background-color: orange;">
        Text-1 Text-2 Text-3
  </div>

text (myText) – ersetzt

   Der an die text() – Methode übergebene myText-Parameter ermöglicht es der Methode, alle verschachtelten Tags vollständig zu ersetzen und stattdessen den myText-Parameter, eine Textzeichenfolge, hinzuzufügen. Betrachten Sie nun ein Beispiel und sehen Sie, wie es funktioniert.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
   // Finde das Element mydiv 
   // Entferne den gesamten Code innerhalb des div-Tags mit id = 'mydiv' 
   // Füge die Zeile 'Neuer Text' ein
     $('#mydiv').text('New text');
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<a href="#">orange-code.ru</a>
	<p>Text-3</p>
  </div>
</body>
</html>

   Bei der Ausführung dieses Codes werden die folgenden Tags gelöscht:

	<p>Text-1</p>
	<p>Text-2</p>
	<a href="#">orange-code.ru</a>
	<p>Text-3</p>

   Als Ergebnis erhalten wir:

text(funktion (index, value)) – wird entsprechend der Funktion ersetzt

   Wir haben jedoch eine etwas kompliziertere Möglichkeit, Text mit jQuery hinzuzufügen. Der Punkt ist, dass die Textmethode (Funktion (Index, Wert)) mit jedem ausgewählten Block separat arbeiten kann. Wenn Sie den folgenden Code ausführen, sehen Sie, dass für jeden Block die ersten 6 Zeichen der Textinformationen des Blocks ausgewählt und Informationen zum Index des Blocks selbst hinzugefügt werden.

<!DOCTYPE html>
<head>
<style>
.mydiv {
	border: 1px dotted gray;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(function (){
    $('.button').click(function(){
       $('.mydiv').text(function(index, text){
                text = text.substr(0,8);
		text = text + " index" + index;
           return text;
       });
    });
});

</script>
</head>
<body>
  <div class="mydiv">
	<p>Text-11111</p>
	<a href="#">orange-code.ru</a>
  </div>
  
  <div class="mydiv">
	<p>Text-22222</p>
	<a href="#">orange-code.ru</a>
  </div>

  <div class="mydiv">
	<p>Text-33333</p>
	<a href="#">orange-code.ru</a>
  </div>
  
  <input type="button" class="button" value="Holen Sie sich die ersten 6 Zeichen aus jedem Block mit Klasse 'mydiv'">

</body>
</html>

Text-1111111111111111

Text-2222222222222222

Text-3333333333333333

Holen Sie sich die ersten 6 Zeichen aus jedem Block mit Klasse ‚mydiv‘ und index

   Jetzt testen wir 🙂

1. Was bedeutet myText in der Methode text(myText)?

 
 
 
 

2. Welche Methode eignet sich nicht für die Arbeit mit Text?

 
 
 
 

3. Was bedeutet Index in der Textmethode (Funktion (index, text)); ?

 
 
 
 

4. Was bewirkt dieser Befehl $(‚.mydiv‘).text(); ?

 
 
 
 

5. Was gibt die Methode text() zurück, wenn der ausgewählte Block mehrere Elemente mit Textinformationen enthält?

 
 
 
 

Question 1 of 5

   Gute Programmierung!