Как написать такую конструкцию на JS?

Question

[VANY]

Здравствуйте, я плохо разбираюсь в JS, но вот что хочу сделать.
Есть

<div id="container" class="not-active">
</div>
<div id="container" class="active">
    <div id="child" class="s-active"><div id="img"></div></div>
    <div id="child" class="s-not-active"><div id="img"></div></div>
    <div id="child" class="s-not-active"><div id="img"></div></div>
</div>

Есть 3 дива внутри родительского дива.
Когда родитель получает класс .active, дочерние 3 div'a по очереди получают класс .s-active.

1) Как на js написать такое?

if (#container имеет класс .active || #child имеет класс .active) {
мой код, который будет работать с #img
};

2) важно то, что один из #container постоянно активный и #container, который был активным, опять может стать активным + я так понимаю, что нужно иметь ввиду, что #img несколько, т.е. надо каждый раз заново сканировать #img внутри его родителя.

т.е. обычными if не обойтись. В общем знания у меня поверхностные, прошу помощи.

Comments

[Сергей Мельников]

вы лучше скажите, для чего это нужно и мы посоветуем более верное решение.
и насчет id, он должен быть уникальным

Answer 1

[heartdevil]

Привет.

У вас в html-структуре повторяются id у элементов. Такого нельзя делать если вы работаете с этой структурой в js.
Каждый элемент должен быть уникальным. Уникальность задается по id. Это не касается классов.

для того, чтобы найти в dom ваш контейнер используйте это

var container = document.getElementById("container");

для того, чтобы найти все дочерние элементы у родительского элемента используйте это

var children = container.getElementsByTagName("div");

чтобы задать класс у элемента используйте свойство className;

container.className = "active";

для задания класса группе элементов нужен цикл.

for (var i = 0; i < children.length; i++)
{
children[i].className = "s-active";
}

Comments

[VANY]

Подскажите, а каким образом запустить исполнение скрипта только если какой-то блок имеет определенный класс? Т.е. чтобы скрипт постоянно мониторил DOM и в случае выполнения условия - выполнял код.

[heartdevil]

Иван Украинцев: У вас какая-то новая задача? Опишите, что хотите сделать, я посоветую решение, если смогу. В целом же запуск скриптов обычно проходит как реакция на событие. К примеру, клик по ссылке, наведение курсора на ссылку, нажатие кнопки и т.д. Если у вас события никакого нет, то чтобы скрипт постоянно выполнялся, вам надо использовать setInterval или setTimeout по обстоятельству. То есть при помощи этих функций вы зададите периодичность выполнения вашего скрипта (js-функция), к примеру, раз в секунду.

[VANY]

heartdevil: я уже понял, что нужен либо интервал либо таймаут для отложенного запуска (чтобы увидело измененный DOM).
У меня есть слайдер. Хочу, когда он активный, активировать скрипт и искать внутри каждого слайда и по нахождению запускать его отрисовку через vivus.js, поэтому блин все в id, т.к. он на вход принимает только id (буду как-то решать это дело, скорее всего присвоением id, только если слайдер активный).
Решил через windows(load) закинуть onclick событие на переключатели слайдера (автоматом он не переключается), и при нажатии будет искать внутри контейнера слайдера слайд с классом active, в нем присваивать единственному svg блоку id и по этому id запускать vivus :) жесть, но я не хочу делать таймер - это будет грузить клиент, а я рассчитываю и на телефоны.

[heartdevil]

Иван Украинцев: Ого). Так сразу без пол литра не вкурить).
У вас есть слайдер, а это какая-то библиотека тоже? Если библиотека, то там могут быть колбэки на разные события. На них можно подписываться и писать, что хотите.

Я не очень понял, вы внутри слайдера, когда слайдер активный (то есть произошел клик), запускаете скрипт, который ищет слайд и запускает его отрисовку через vivus.js? Про id тоже не очень понял. Кто принимает только id?

[VANY]

heartdevil:
1) есть слайдер, в каждом слайдере которого содержится svg;
2) есть библиотека, которая управляет слайдером;
3) есть библиотека, которая умеет отрисовать svg по id;
4) я уже нашел коллбэки из первой библиотеки, которые по вызову будут искать в активном слайдере svg, назначать ему id, и этот id будет скармливаться второй библиотеке :)

[VANY]

heartdevil: В каждом слайде*