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

Поиск:

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


Новичок



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

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



Подскажите пожалуйста

Как можно обратиться к нескольким div-ам?

К примеру

<div class="Container">

<div class="bgcolor">Test1</div>
<div class="bgcolor">Test2</div>
<div class="bgcolor">Test3</div>
...
<div class="bgcolor">Test20</div>
<div class="bgcolor">Test21</div>
<div class="bgcolor">Test22</div>

</div>

Нужно по определенному событию, динамический пройтись по всем дивам класса "bgcolor",
И Если высота дива больше 200px то изменить цвет фона на "Оранжевый".

Это сообщение отредактировал(а) DMITRI - 19.12.2007, 21:50
PM MAIL   Вверх
Ghirik
Дата 19.12.2007, 21:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



А что нужно сделать с этими дивами? Обратиться можно пройдясь по ним в цикле. Обратиться можно по классу, по id, по названию тэга.

По классу это будет выглядеть так:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title block</title>
<script type="text/javascript">
<!--
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;
        }
    }

}
//-->
</script>
</head>
<body onclick="passBy()">
<div class="bgcolor">Test1</div>
<div class="bgcolor">Test2</div>
<div class="bgcolor">Test3</div>
<div class="bgcolor">Test20</div>
<div class="bgcolor">Test21</div>
<div class="bgcolor">Test22</div> 
</body>
</html>

Кликните в области дивов

Это сообщение отредактировал(а) Ghirik - 20.12.2007, 00:05


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

PM MAIL   Вверх
DMITRI
Дата 19.12.2007, 21:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Спасибо за быстрый ответ


А если у меня много вложенных дивов 

Например

<div class="Container">

<div class="nav"><div class="nav"><div class="bgcolor">Test1</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor">Test2</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor">Test3</div></div></div>

...
<div class="nav"><div class="nav"><div class="bgcolor">Test20</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor">Test21</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor">Test22</div></div></div>

</div>


можно ли как то проще обратиться, именно к дивам класса bgcolor

Нужно по определенному событию, динамический пройтись по всем дивам класса "bgcolor",
И Если высота дива больше 200px то изменить цвет фона на "Оранжевый".


Это сообщение отредактировал(а) DMITRI - 19.12.2007, 22:03
PM MAIL   Вверх
SelenIT
Дата 19.12.2007, 22:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Можно при первом вызове этой ф-ции закешировать ссылки на нужные дивы в массив. И в дальнейшем бегать лишь по этому массиву.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
DMITRI
Дата 19.12.2007, 22:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Доработал - Если высота дива больше 200px то изменить цвет фона на "Оранжевый".

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title block</title>
<script type="text/javascript">
<!--
function passBy(){
    var div = document.getElementsByTagName('div');
    alert(div.length);
    for (i = 0; i < div.length; i++) {
        if (div[i].className = 'bgcolor' && div[i].offsetHeight >= '200') {
      div[i].style.backgroundColor = "orange";
        }
    }

}
//-->
</script>
</head>
<body onclick="passBy()">
<div class="nav"><div class="nav"><div class="bgcolor" style="height:40px">Test1</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor" style="height:240px">Test2</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor" style="height:140px">Test3</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor" style="height:340px">Test20</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor" style="height:70px">Test21</div></div></div>
<div class="nav"><div class="nav"><div class="bgcolor" style="height:10px">Test22</div></div></div> 
</body>
</html>



Есть ли еще какие нибудь способы, как можно оптимально обратиться именно к дивам класса "bgcolor"?

Не перебирая все дивы

Заранее благодарю за ответы!


Это сообщение отредактировал(а) DMITRI - 19.12.2007, 22:51
PM MAIL   Вверх
Ghirik
Дата 19.12.2007, 23:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата

Можно при первом вызове этой ф-ции закешировать ссылки на нужные дивы в массив. И в дальнейшем бегать лишь по этому массиву. 

Пожалуй других способов и нет. Вы можете по событию window.onload назначить функцию, которая пробежит по всем дивам и дивы с классом "bgcolor" сложит во вновь созданный массив. А избежать полностью обхода всех дивов неудастся.


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

PM MAIL   Вверх
SelenIT
Дата 19.12.2007, 23:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Нелепую опечатку исправьте только, плз. Ghirik, нехорошо такие ошибки в примерах допускать... ;)


Цитата(DMITRI @  19.12.2007,  22:11 Найти цитируемый пост)
Есть ли еще какие нибудь способы, как можно оптимально обратиться именно к дивам класса "bgcolor"?

Не перебирая все дивы

В общем случае, насколько я знаю, нет. Если верстка точно известна, можно привязываться к ней - например, в данном случае можно выбрать всех childNodes у body, и затем обращаться к firstChild.firstChild каждого из них (предварительно проверив каждый уровень firstChild на существование, во избежание ошибок), но имхо это экономия на спичках. А вот кеширование в массив вполне может ускорить второй и последующий вызовы...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ghirik
Дата 19.12.2007, 23:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата

и затем обращаться к firstChild.firstChild каждого из них (предварительно проверив каждый уровень firstChild на существование, во избежание ошибок), но имхо это экономия на спичках. 

Это может ещё и не кроссбраузерно получиться, у них там разные чилды smile бывают.

SelenIT, Вы меня озадачили на двадцать минут, что за опечатка, может это и не опечатка а твердая уверенность. smile

Добавлено @ 23:49
window.onload что ли? Дак это я чтобы указать принадлежность события, ну событие понятно onload

Это сообщение отредактировал(а) Ghirik - 19.12.2007, 23:51


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

PM MAIL   Вверх
SelenIT
Дата 19.12.2007, 23:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Ghirik, нет, в if-е.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ghirik
Дата 19.12.2007, 23:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



 smile  исправил....
for (var i = 0; i < div.length; i++) 
Это действительно опечатка,  если переменная объявляется на время выполнения функции, то лучще не захламлять мозги компьютеру и объявлять её используя оператор var. Тогда при выходе из функции она будет уничтожена, иначе останется доступной глобально.

Это сообщение отредактировал(а) Ghirik - 20.12.2007, 00:00


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

PM MAIL   Вверх
SelenIT
Дата 19.12.2007, 23:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



сорри, не вижу... smile 


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ghirik
Дата 20.12.2007, 00:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



И я не вижу  smile 

Может косяка и нет вовсе?

Вот ведь!!! Увидел, спасибо, про это можно и не рассказывать... smile

Добавлено через 9 минут и 45 секунд
Кстати, SelenIT, я где то встречал в if-е одновременное со сравнением присвоение значения переменной, т.е. во время сопоставления происходит присвоение. Как это записывается? Дайте, пожалуйста, примерчик. А то бывает надо....

Это сообщение отредактировал(а) Ghirik - 20.12.2007, 00:06


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

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


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Что-то типа такого: if ((a = something.value) < 1500) ... ?

Можно, конечно. Только объявить переменную все равно нужно раньше - var в такую запись не запихнешь. Да и экономить строчки в ущерб читаемости - имхо, не лучшая практика.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ghirik
Дата 20.12.2007, 00:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата

Что-то типа такого: if ((a = something.value) < 1500) ... ?


Да, примерно так, да я тут что то сочинял, и так сильно подошел бы такой вариант... Но именно из-за var у меня и не работало. И дело не в экономии строчек, а просто в цикле было удобно, и мне, почему то, нравится такая запись. Спасибо.


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

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


Новичок



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

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



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

2 Ghirik

Может вот этот if с присвоение.

The ( ) ? : Conditional Operator Statement
JavaScript Syntax:
evaluatedResult = (condition) ? expression1 : expression2

Код

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



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


 




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


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

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