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