Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2014, 22:52
Аспирант
Отправить личное сообщение для Smike Посмотреть профиль Найти все сообщения от Smike
 
Регистрация: 01.06.2014
Сообщений: 33

как добавить класс элементам с определенным интервалом
всем привет. передо мной стоит следующая задача.
к примеру есть несколько параграфов с определенным классом.
нужна функция, которая будет добавлять всем этим параграфам второй класс с определенным интервалом. то есть, страница загрузилась, через секунду добавился класс к первопу <p>, потом через секунду ко второму <p> и т.д.

Я использовал классы из учебника Флэнагана для добавления классов.

http://jsfiddle.net/az8oaswb/1/

вот то, что у меня получилось, но к сожалению классы добавляются сразу, без интервала. подскажите, в чем может быть проблема?
ps мне кажется здесь нужна именно функция setTimeout(), чтобы класс добавлялся на каждой итерации цикла.

Последний раз редактировалось Smike, 22.10.2014 в 22:59.
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2014, 23:50
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,514

<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>

Последний раз редактировалось Vlasenko Fedor, 23.10.2014 в 00:11.
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2014, 00:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,981


<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>
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2014, 00:52
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,514

рони в своем примере ты каждую итерацию ищешь элементы в DOM
я же делаю это один раз этим мой пример лучше
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2014, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,981

Poznakomlus,
да да одна функция next чего стоит
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2014, 09:47
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

<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>

Последний раз редактировалось BETEPAH, 23.10.2014 в 10:06.
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2014, 11:24
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,514

Сообщение от рони Посмотреть сообщение
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>
  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>
Ответить с цитированием
  #8 (permalink)  
Старый 23.10.2014, 11:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Poznakomlus
рони в своем примере ты каждую итерацию ищешь элементы в DOM
Каким хреном это проблема? Если код от этого короче и ясней - то зачем мудрить. Одно фигово - :not() не работает в IE8.
BETEPAH, твой getByClassName тоже в IE8 не работает ) И тем более .bind()
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 23.10.2014, 12:24
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,514

Сообщение от danik.js
Каким хреном это проблема?
Сообщение от danik.js
Одно фигово - :not() не работает в IE8
А еще возьми так 10000 парагрофов и прйдись по ним каждую итерацию
Ответить с цитированием
  #10 (permalink)  
Старый 23.10.2014, 12:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Poznakomlus
А еще возьми так 10000 парагрофов и прйдись по ним каждую итерацию
Ок:

<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 тормозит ?
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как найти нужный элемент страницы и кликнуть если он имеет тока класс... Александр_1997 Events/DOM/Window 3 18.01.2014 12:34
Как добавить задержку? SnakeAce Ваши сайты и скрипты 7 29.10.2013 17:56
Как при появление класса в блоке1, добавить класс в блок2? raindew jQuery 3 11.10.2013 20:05
Как добавить свой блог в раздел feeds этого сайта IzumeRoot Ваши сайты и скрипты 13 30.10.2008 20:11
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 12:55