Как изменить все дочерние div-файлы выбранного класса в HTML?

Question

• У меня есть класс, в котором есть большие нет. из div.
• Я хочу, чтобы получить доступ к этим идентификаторам внутри класса и применить анимацию игру госсобственность

Вот мой код:

<div class="p5pg5QXlX-an-stage"> 
       <div id="p5pg5QXlX-an-obj-1"> 
        <div><img height="416" width="320" src="assets/overlay1.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-2"> 
        <div><img height="416" width="320" src="assets/float.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-3"> 
        <div><img height="416" width="320" src="assets/temple.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-4"> 
        <div><img height="416" width="320" src="assets/go.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-5"> 
        <div><img height="416" width="320" src="assets/da.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-6"> 
        <div><img height="416" width="320" src="assets/va.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-7"> 
        <div><img height="416" width="320" src="assets/ri.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-8"> 
        <div><img height="416" width="320" src="assets/matha.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-9"> 
        <div><img height="416" width="320" src="assets/pu.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-10"> 
        <div><img height="416" width="320" src="assets/shka.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-11"> 
        <div><img height="416" width="320" src="assets/raa.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-12"> 
        <div><img height="416" width="320" src="assets/luu.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-13"> 
        <div><img height="480" width="320" src="assets/page1hw.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-14"> 
        <div><img height="416" width="320" src="assets/panel.png"> 
        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-15"></div> 
       <div id="p5pg5QXlX-an-obj-16"> 
        <div><img height="89" width="89" src="assets/rplay.png"> 

        </div> 
       </div> 
       <div id="p5pg5QXlX-an-obj-17"> 
       <img height="49" width="49" src="assets/555b175b463b9mFtlk8d8BP4hFbiCHF1w.png"> 
       <span></span> 
       </div> 
      </div> 

Я хочу, чтобы применить анимацию госсобственность всех идентификаторы так сообщите мне, как получить доступ к идентификатору внутри класса?

Я сделал это:

var id=document.getElementByClassName("p5pg5QXlX-an-stage"); 
id.style.WebkitAnimationPlayState="paused"; 

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

document.getElementById("p5pg5QXlX-an-obj-2").WebkitAnimationPlayState="paused"; 

, потому что я хочу, общий код этого так пожалуйста, помогите мне в этом & попытаться дать sol'n в JavaScript.

Answer 1

Вы можете попробовать это,

var elements = document.querySelectorAll(".p5pg5QXlX-an-stage > div"); 
Array.prototype.forEach.call(elements, function(el, i){ 
    el.style.WebkitAnimationPlayState="paused"; 
}); 

Answer 2

document.getElementById("p5pg5QXlX-an-obj-2") является правильной инструкцией, если вы собираетесь получить доступ к одному уникальному элементу HTML. Вы можете заменить "p5pg5QXlX-an-obj-2" с Javascript var сделать выбор динамичен, как:.

var id; 
document.getElementById(id) 

Надеется, что это может помочь

Answer 3

Вы можете нацелить непосредственно с помощью CSS в идентификаторах или JavaScript Нет два элементов не должны иметь то же самое. идентификатор. document.getElementById(id_string) для JavaScript и #myID для CSS

Answer 4

Я понимаю, что вы пытаетесь сделать что-то для всех детей дивы внутри класса.

Применение у наш оригинальный выбор и перебрать все дочерние div, которые вы хотите применить к состоянию, например, в this question.

Итак:

var children = document.getElementsByClassName("p5pg5QXlX-an-stage")[0].childNodes; 
children.forEach(function(node){ 
    node.style.WebkitAnimationPlayState="paused"; 
}) 

Answer 5

, как я понимаю, до сих пор, вы пытаетесь сделать что-то с сНу ребенка Я хотел бы предложить использовать подстановочные, чтобы выбрать все div child:

var elems = document.querySelectorAll('div[id^="p5pg5QXlX-an-obj-"]'); 
for (var i = 0, len = elems.length; i < len; i++){ 
    console.log(elems[i]); 
}