javascript获取其他元素中的元素

Question

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

Answer 1

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) => {
  // ...
});