Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как можно обратиться к нескольким div-ам 
:(
    Опции темы
Ghirik
Дата 20.12.2007, 00:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Все равно это можно сделать только в цикле, обходя все дивы. Просто в этом случае Вы сразу измените цвет фона. Если Вы знаете, что вам нужно будет сделать, найдя див с нужным классом, тогда, конечно, лучше сделать сразу.

Добавлено через 13 минут и 46 секунд
По этой функции:
Код

function passBy(){
    var div = document.getElementsByTagName('div');
    for (var i = 0; i < div.length; i++) {
        if (div[i].className == 'bgcolor') {
        div[i].innerHTML = 'Testing' + i;
        }
    }

}

В этой строчке var div = document.getElementsByTagName('div'); создается массив всех элементов div имеющихся внутри тэга body. Метода создающего массив элементов по классу нет, вернее, в DOM, по моему, есть метод getElementsByClassName('class'), но он браузерами не поддерживается. Поэтому приходится запускать цикл, в котором мы отбираем элементы по классу, и вместо:
Код

if (div[i].className == 'bgcolor') {
div[i].innerHTML = 'Testing' + i;
}

можно написать:
Код

div[i].className = "bgGreen" ? div[i].style.backgroundColor = "green" : div[i].style.backgroundColor = "red";


Но я где-то смотрел результаты тестов, и по моему, такая запись работает малость медленнее.
 





--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
AKS
Дата 20.12.2007, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Поэкспериментировал сегодня на досуге, решая данную задачу в следующем ключе.
При загрузке страницы создается массив с нужными элементами. В случае, если в дальнейшем в документ будут добавляться элементы, имя класса которых будет соответствовать искомому классу, то эти элементы также будут добавляться в массив. При клике по документу элементам с высотой, больше заданной, будет добавляться еще одно имя класса для изменения визуального представления, и эти элементы будут удаляться из массива.
Я не стал "нагружать" функции дополнительными проверками, т.к. не очень хорошо представляю то, каким должен быть конечный результат. Не во всех браузерах, конечно же, есть возможность обрабатывать такие события, как DOMNodeInserted/DOMAttrModified/DOMContentLoaded. Однако для IE тоже самое можно "сделать", описав соответствующее behavior в .htc, используя при этом обработчики события onpropertychange (универсальное событие, черт побери!).
Код

if (typeof window == 'object' &&
        typeof window.addEventListener == 'function') {     
    // элементы с этим именем класса будут "сохранены" в массиве
    var classSearch = 'bgcolor';
    // это имя класса будет добавлено элементам для изменения бэкграунда
    var classAdd = 'orange';    
    // элементам с такой высотой будет добавлено имя класса "orange"
    var height = 200;   
    var reSearch = new RegExp('(^|\\s)' + classSearch + '(\\s|$)');  
    var reAdd = new RegExp('(^|\\s)' + classAdd + '(\\s|$)');
    var onLoad = function () {
        var elems;
        var cach = [];      
        var body = document.body;       
        if (typeof body.getElementsByClassName == 'function') {     
            elems = body.getElementsByClassName(classSearch);
            cach = Array.prototype.slice.apply(elems);          
        } else {     
            elems = body.getElementsByTagName('*');           
            var i = elems.length;         
            while (i--) {
                var e = elems[i];
                if (e && reSearch.test(e.className)) {
                    cach.push(e); 
                };
            };
        };      
        var onNodeInserted = function (aEvent) {
            onAttrModified(aEvent, true);
        };    
        var onAttrModified = function (aEvent, aBool) {
            var target = aEvent.target;
            var bool = reSearch.test(target.className) &&
                           !reAdd.test(target.className);
            if (cach && bool) {
                cach.push(target);
            };
            if (aBool) {
                target.addEventListener('DOMAttrModified',
                                        onAttrModified,
                                        false);
            };
        };       
        var onClick = function () {
            var i = cach.length;
            while (i--) {
                var e = cach[i];
                if (e && e.offsetHeight > height) {
                    if (!reAdd.test(e.className)) {
                        e.className += ' ' + classAdd;
                    };
                    cach.splice(i, 1);
                };
            };
        };      
        document.addEventListener('DOMNodeInserted',
                                  onNodeInserted, false);                              
        document.addEventListener('click', onClick, false);
    };  
    window.addEventListener('DOMContentLoaded', onLoad, false);
};

PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0416 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.