Доступ до кожного елемента у вибірці по черзі, активний елемент this
.each(function(){...}) - перебір елементів у вибірці
Пронумеруємо всі блоки зі спільним класом .de
.de
.de
.de
.de
.de
.de
.de
$('#btn1').click (function(){
var num=1;
$('.de').each(function(){// для кожного елемента з таким класом
$(this).text(num);// для активного елемента записуємо номер
num++;// збільшуємо змінну на 1
});
});
Приклади з традиційними циклами
while(умова)Цикл виконується доки виконується умова
.de
.de
.de
.de
.de
.de
.de
$('#btn2').click (function(){
var count = $('.de').length;
let i = 0;
while (i<count) {
$('.de').eq(i).text(i+1);
i++;
}
});
do {...} while(умова)
Цикл виконується доки виконується умова
.de
.de
.de
.de
.de
$('#btn3').click (function(){
var count = $('.diveach2').length;
let i = 0;
do {
$('.de').eq(i).text(i+1);
i++;
} while (i<count);
});
for(умова)
Цикл виконується доки виконується умова
.de
.de
.de
.de
.de
.de
$('#btn3').click (function(){
var count = $('.de').length;
for (let i = 0; i < count; i++) {
$('.de').eq(i).text(i+1);
}
});
css стиль кнопок
.de {
width: 24px;
height: 24px;
padding: 5px;
margin-left: 10px;
background: -webkit-linear-gradient(top, #dddddd, white);
background: -moz-linear-gradient(top, #dddddd, white);
background: -ms-linear-gradient(top, #dddddd, white);
background: -o-linear-gradient(top, #dddddd, white);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
display: inline-block;
border: 1px solid #a0a0a4;
text-align: center;
}
далі ✏