training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

Обход DOM-дерева jquery

Создано: 23 декабря 2015Автор: Егор Астапов2043 просмотраСложность: легкий

Обход DOM-дерева в javascript - это одна из крутых фишек javascript. Тут можно одной функцией each() или любым циклом разукрасить весь список. Подробнее о функции each читайте на странице обработка каждого элемента массива each().Обход DOM-дерева jquery применяют для подведения итогов в таблицах. Например, сумма всех покупок. Вы можете разукрасить разными цветами каждую запись. Очень удобно. Допустим у вас есть список с записями. Вам нужно пронумеровать каждую запись.


<ul id="list"> 
   <li>запись</li> 
   <li>запись</li> 
   <li>запись</li> 
   <li>запись</li> 
</ul> 

Вам нужно к каждой записи добавить номер строки. Тут поможет функция each().


$.each('#list li', function(i){
   var str = $($this).text();
   $(this).text(str + ' ' + i);
});

Найдутся умельцы, которые будут вручную перебирать каждую запись.


$("#list li:eq(0)").text($("#list li:eq(0)").text() + " 0");
$("#list li:eq(1)").text($("#list li:eq(1)").text() + " 1");
$("#list li:eq(2)").text($("#list li:eq(2)").text() + " 2");

Если будет масса записей, то вы будите дублировать строки. Дублирование кода для яваскрипта - это плохая практика. Вы можете использовать цикл while для обхода DOM-дерева.


var count = $("#list li").length;
var i=0;
while(i < count){
   $("#list li:eq(" + i + ")").text($("#list li:eq(" + i + ")").text() + " " + i);
   i++;
}

Комментарии

реклама