index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// Метод $.each() позволяет исполнить переданную функцию для всех элементов переданного объекта или массива.
// Это цикл!
$('p').each(
function() {
// alert(this.innerHTML); // по порядку выводится содержимое всех абзацев
// alert($(this).html()); // так мы можем применять все методы JQ
/*
var newText = $(this).html() + '-' + $(this).html() ;
$(this).html(newText); // Выведется: 1-1, 2-2
*/
// Ускорим выполнение кода.
/*
var $elem = $(this);
var text = $elem.html();
var newText = text + '-' + text;
$elem.html(newText);
*/
}
);
// Переделаем тоже самое методом html()
$('p').html(
function(index, text) {
// alert(index); // будут выводится индексы элементов массива абзацев по порядку от 0.
// alert(text); // будет выводится содержимое абзацев
var newText = text + '-' + text;
$(this).html(newText);
}
);
</script>
</body>
</html>
Комментариев нет:
Отправить комментарий