Часто по средством 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
Тест
Хорошего программирования!
Добавить комментарий