Часто по средством jQuery необходимо добавить текст. Сделать это очень просто с помощью метода text(). Этот метод можно использовать тремя способами:

  • text() — возвращает текст;
  • text(myText) — производит замену;
  • text(function(index, value)) — производит замену согласно функции.

   А теперь рассмотрим каждый вариант подробнее и с примерами.

text() — получение текста

   В нижеприведенном примере рассмотрим случай когда в выделенный элемент имеет только одни внутренний элемент с текстовой информацией.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
  // Находим элемент #mydiv, заносим в переменную myText текстовую информацию, 
  // которая находиться внутри выбранного элемента.
  var myText = $('#mydiv').text();
  
  // Выводим переменную myText в тег с id="result"
  $('#result').html(myText);
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  <!-- Тег для вывода переменной myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

   При выполнения данного кода  мы получим код:

<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  // Добавил оранжевый фон для блока вывода
  <div id="result" style="background-color: orange;">
           Text-1
  </div>
</body>

   Если в выделенном блоке находятся несколько элементов с текстовой информацией, то метод text() вернет строку, в которой текстовая информация различных элементов будет разделена пробелами. Ниже код для этого случая.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
  // Находим элемент #mydiv, заносим в переменную myText текстовую информацию, 
  // которая находиться внутри выбранного элемента.
  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>
  
  <!-- Тег для вывода переменной myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

Результат выполнения такой:

  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<p>Text-3</p>
  </div>
  
  <!-- Тег для вывода переменной myText -->
  <div id="result" style="background-color: orange;">
        Text-1 Text-2 Text-3
  </div>

text(myText) — производит замену

   Переданный параметр myText в метод text() позволяет методу произвести полную замену всех любых вложенных тегов и вместо них добавить параметр myText, который представляет из себя текстовую строку. Сейчас рассмотрим пример и увидим, как это работает.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
  // Находим элемент #mydiv
  // Удаляем весь код внутри тега div с id="mydiv"
  // Помещаем внутрь строку 'New text'
     $('#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>

   При выполнении данного кода будут удалены следующие теги:

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

   В результате получим:

  <div id="mydiv">
      New text
  </div>

text(function(index, value)) — производит замену согласно функции

   А вот добрались и да чуток сложнее способа добавления текста с помощью jQuery. Суть следующая, что метод text(function(index, value)) может работать с каждым попавшим под выборку блоком отдельно. При выполнении следующего кода, мы видим, что у каждого блока выбирается 6 первых символов текстовой информации блока и прибавляется информации о индексе самого блока.

<!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="Получить первые 6 символов от каждого блока с классом 'mydiv'">

</body>
</html>

Пример №1

Text-1111111111111111

Text-2222222222222222

Text-3333333333333333

Получить первые 6 символов от каждого блока с классом ‘mydiv’ и index

Тест

1. Что вернет метод text(), если в выделенном блоке находятся несколько элементов с текстовой информацией?

 
 
 
 

2. Какой метод не для работы с текстом?

 
 
 
 

3. Что выполнит данная команда $(‘.mydiv’).text();  ?

 
 
 
 

4. Что означает index в методе text(function(index, text)); ?

 
 
 
 

5. Что означает myText в методе text(myText)?

 
 
 
 

Вопрос 1 из 5

Хорошего программирования!