Могу ли я изменить этот скрипт для работы с несколькими тегами DIV?

Question

Вот мой текущий код:

var text = ['foo', 'bar', 'baz'];
    i = 0,
    $div = $('#myDiv');

setInterval(function ()
{
    $div.fadeOut(function ()
    {
        $div.text(text[i++ % text.length]).fadeIn();
    });
}, 1000);

Может кто-нибудь показать мне, как заставить работать несколько DIV-тегов на одной странице? Прямо сейчас это работает только с одним.

Эрик

Answer 1

Используйте jQuery.each и / или селектор (я полагаю, вы используете jQuery?)

jQuery.each (collection, callback (indexInArray, valueOfElement)) http://api.jquery.com/jQuery.each/

Универсальная функция итератора, которую можно использовать для бесшовной итерации как по объектам, так и по массивам.Массивы и массоподобные объекты со свойством длины (например, объект аргументов функции) повторяются по числовому индексу от 0 до длины-1.Другие объекты повторяются через свои именованные свойства.

Селекторы http://api.jquery.com/category/selectors/

Позволяет выбирать элементы, относящиеся к конкретному селектору jQuery.Вы можете найти список возможных селекторов на странице документации по селекторам jQuery.

Answer 2

<script type="text/javascript">

   var text = ['foo', 'bar', 'baz'];
   i = 0,
   $divs = $('#DIV1, #DIV2');// or $('div.class1') for all divs
                             // with class='class1'

   setInterval(function ()
   {
       $divs.fadeOut(function (){
                        $(this).text(text[i++ % text.length]).fadeIn();
                    });
   }, 1000);

</script>

Answer 3

Не совсем понятно, что вы пытаетесь сделать, но может быть что-то вроде:

//get all the div elements with the given classname
divs = document.getElementsByClassName("myDivClassName");

//for each div, apply the update on a timer
setInterval(function () {
    for (var index = 0; index < divs.length; index++) {
        var div = divs[index];
        div.fadeOut(function () {
            div.text(text[i % text.length]).fadeIn();
        });
    }
    i++;
}, 1000);