javascript get elements inside other elements

user_11363906 0
Viewed 27

I'm trying to use less an less jQuery, but I find it hard for dom elements selection or manipulation. I don't know well how to ask this question, but I'm trying to loop over elements inside an element coming from a forEach loop.

this might be clearer with code:

const sections = document.querySelectorAll('.section')
sections.forEach(section => {
    // now get an array of boxes elements INSIDE this section (and only this one)
})

In jQuery I would do it this way:

$('.section').each((key, section) => {  
    $('.box', $(section)).each((key2, item) => {
        console.log($(item))
    })
})
jquery javascript
1 Answers

querySelectorAll can be called not only on the document to find descendants of the document, but also on nodes to find descendants of that node that match the selector.

document.querySelectorAll('.section').forEach(section => {
  section.querySelectorAll('.box').forEach((box) => {
    // ...
  });
});

If the situation warrants, you can also combine the selectors and use only a single querySelectorAll.

document.querySelectorAll('.section .box').forEach((box) => {
  // ...
});
user_95152070
Related