How do I modify all of a selected class' child divs, in HTML?

Question

• I have a class in which there are large no. of div's.
• I want to access those id's inside a class and apply the animation play state property

Here is my code:

<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>

I want to apply animation state property to all the id's so please tell me how to access the id's inside a class?

I have done this :

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

but it didn't work,i have seen in the inspect element the var id gives a bunch of id's so how i can access all the id's & i don't want to hard-code the each id by name like:

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

because i want a generic code of this so please help me in this & try to give the sol'n in javascript.

Answer 1

I understand you are trying to do something to all the child divs inside the class.

Use your original selection and iterate over all the child divs that you want to apply state to, like in this question .

So:

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

Answer 2

You can try this,

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

Answer 3

document.getElementById("p5pg5QXlX-an-obj-2") is a correct statement if you are going to access a single unique HTML element. You can replace " p5pg5QXlX-an-obj-2" with Javascript var to make the selection dynamic, like:

var id;
document.getElementById(id)

Hope this may help.

Answer 4

You can target the id's directly using css or JavaScript. No two elements should have the same id. document.getElementById(id_string) is for JavaScript and #myID is for CSS

Answer 5

as I understand so far, you are trying to do something with div child I would suggest to use wildcard to select all 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]);
}