как добавить класс элементам с определенным интервалом
всем привет. передо мной стоит следующая задача.
к примеру есть несколько параграфов с определенным классом. нужна функция, которая будет добавлять всем этим параграфам второй класс с определенным интервалом. то есть, страница загрузилась, через секунду добавился класс к первопу <p>, потом через секунду ко второму <p> и т.д. Я использовал классы из учебника Флэнагана для добавления классов. http://jsfiddle.net/az8oaswb/1/ вот то, что у меня получилось, но к сожалению классы добавляются сразу, без интервала. подскажите, в чем может быть проблема? ps мне кажется здесь нужна именно функция setTimeout(), чтобы класс добавлялся на каждой итерации цикла. |
<style>
.red {
color: red;
}
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
function next(len) {
var i = -1;
return function () {
i++;
return i == len ? -1: i;
};
}
var allP = document.querySelectorAll('p.hello'),
pos = next(allP.length),
current,
timer = setInterval(function () {
current = pos();
if (current == -1) {
clearInterval(timer);
} else {
allP[current].className += ' red';
}
}, 2000);
</script>
|
:write:
<style>
.red {
color: red;
}
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
var p,
timer = setInterval(function () {
p = document.querySelector('p.hello:not(.red)');
p ? p.classList.add('red') : clearInterval(timer)
}, 2000);
</script>
|
рони в своем примере ты каждую итерацию ищешь элементы в DOM
я же делаю это один раз этим мой пример лучше :dance: |
Poznakomlus,
да да одна функция next чего стоит :) |
<style>.red {color: red}</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
(function (nameClass, addThis) {
var classes = document.getElementsByClassName(nameClass);
for(var i = 0; i < classes.length; i++) {
setTimeout(addClass.bind(false, classes[i], addThis), i*2000 + 2000);
}
})("hello", "red");
function addClass(o, c){
var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
if (re.test(o.className)) return
o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
}
</script>
|
Цитата:
<style>
.red {
color: red;
}
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
var allP = document.querySelectorAll('p.hello'),
len = allP.length,
i = 0,
timer = setInterval(function () {
if (len--) {
allP[i++].className += ' red';
} else {
clearInterval(timer);
}
}, 2000);
</script>
:) |
Цитата:
BETEPAH, твой getByClassName тоже в IE8 не работает ) И тем более .bind() |
Цитата:
Цитата:
|
Цитата:
<body>
<script>var p = document.createElement('p');
p.className = 'hello red';
for (var i = 0; i < 999;i++) {
document.body.appendChild(p.cloneNode(false));
}
p.className = 'hello';
document.body.appendChild(p);
var t = new Date();
p = document.querySelector('p.hello:not(.red)');
alert(new Date() - t);
</script>
</body>
Сколько мс у тебя тратится? UI тормозит ? :) |
| Часовой пояс GMT +3, время: 00:25. |