Access to all childs from a div?

JavaScript
1

Hello!

I would like to know if it’s possible to do this:

I have this

<div id="father">
     <div id="firstchild">
            <div class="group-item entry-2"></div>
            <div class="group-item entry-3"></div>
            <div class="group-item entry-4"></div>
      </div>
</div>

I would like to change the div class of all the childs inside firstchild (but I don’t know how many of them could be there (because those are generated dynamically, so maybe there will be 2 or 30).

It’s possible to do something like this?

I have tried this:

var firstc = document.getElementById('firstchild');
firstc.children.classList.add("slide");

and this:

var matches = document.querySelectorAll('group-item entry-');
matches.classList.add("slide");

But it didn’t work…
What I’m doing wrong?

Thanks.

2

Try:

var grandchildren = document.getElementById('firstchild').children;
for(z=0 ; z<grandchildren.length ; z++) {
	grandchildren[z].classList.add("slide");
}

BTW: you need closing </div> tags for the grandchildren.

1 Like
3

That’s a key point, these need to be closed e.g.
<div class="group-item entry-2"></div>

If you want to select a class with querySelectorAll you need to use the dot notation. Similarly for an id you need to use a hash(#), as per CSS.

e.g. document.querySelectorAll('#firstchild .group-item')

To add classes to them you will need to loop through the returned nodeList. You can use a for loop, a for of loop or forEach to do this

4

Yeah, sorry I forgot to close the divs. I wrote that example here and totally forgot.

The script works wonderful. I want to use that script also in another possible scenario but seems is not working.

This is the other scenario:

<div id="father">

  <div class="empty">
    <div class="empty">
    
       <div id="firstchild">
       
         <div class="empty">
           <div class="empty">
           
              <div class="group-item entry-2"></div>
              <div class="group-item entry-3"></div>
              <div class="group-item entry-4"></div>
              
           </div>
         </div>  
      </div>
    </div>  
  </div>    
</div>

As you can see between father and first child there are two divs, and the same between first child and group-item entries.

I managed to access to father and firstchild using this script:

var firstc= document.getElementById('father');

firstc.classList.add("father-class");
firstc.children[0].children[0].children[0].setAttribute("id", "firstchild");

var second = document.getElementById('firstchild');    
second.classList.add("child-class");
    
var grandchildren = second.children[0].children[0].children[0];
for(z=0 ; z<grandchildren.length ; z++) {
	grandchildren[z].classList.add("slide");
}

It’s because the script only allows direct childs? Example: Edit fiddle - JSFiddle - Code Playground

Thanks

5

Just a word of caution you are defining a global z there
e.g.

for(z=0 ; z < 5 ; z++) {
  // do something here
}
console.log(window.z) // 5 <-- global

Using let will fix that.
for (let z = 0; z < grandchildren.length; z++)

6

@Raiikou

The issue with going down the route — apart from readability — of using children, is if you need to change your html at some point, say wrap the group-item divs in another div, then the code falls apart.

If you can target the group-item class instead with querySelectorAll then that shouldn’t be as much of a problem. You could be a bit more fine grain about it if you wanted.

document.querySelector('#first-child .group-item[class*="entry-"]')

1 Like
7

Hi, thanks for the fast answer. Yeah, most likely that’s the best way to do. But sometimes I can’t target group-item by class and that’s why also I ask here to get a way to do.

This will not be changed for a while so accessing using children route it’s fine for this exceptional use case. I would like to know how to fix the script to edit all the divs inside .children[0].children[0].children[0]

Thanks

8

Why not just use a simple css selector?

The following will give you all of the group-item elements:

var groupItems = document.querySelectorAll("#firstchild .group-item");
groupItems.forEach(
  (groupItem) => groupItem.classList.add("slide")
);

That’s a highly reliable way that is guaranteed on keep on working through

9

I suggested something similar in post#3.

1 Like
10

That’s why I’m asking, “why not?”

To just ignore your good advice and go on some other tangent seems strange, so I’m hoping to learn more about the reasons why.

1 Like
11

Hi @Paul_Wilkins and @rpg_digital.
Thanks for answering.

I think I should have explained from the start what’s going on. But in my real scenario the divs that have the class name “group-item entry…” don’t exist with that name.

I thought it was a good idea to put them a name to make them visible and which ones I would like to target but I think that confused everything.

This would be the real scenario

<div id="father">

  <div>
    <div>
    
       <div id="firstchild">
       
         <div>
           <div>
           
              <div class="random63637236"></div>
              <div class="generic"></div>
              <div class="italy_gdgd"></div>
              
           </div>
         </div>  
      </div>
    </div>  
  </div>    
</div>

That’s why wanted to try accessing to firstchild.children[0].children[0].children[0] and the do the class name for all the encountered divs

Hope this helps to understand better

2 Likes
12

I take it that the class=“empty” doesn’t exist either in the real-world scenario either?

1 Like
13

Yes, you’re right. I have removed also the empty class from those just wanted to make them more visible here.

1 Like
14

Well, mystery solved. We had a sound solution for a problem that didn’t exist.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.