eachContains

by Julien Etienne

HTML

<div class="test">
  <div>
    <span class="test1 A">A1</span>
    <span class="test2 A">A2</span>
    <span class="test3 A">A3</span>
  </div>
</div>

<div class="test">
  <div>
    <span class="test1 B">B1</span>
    <span class="test2 B">B2</span>
    <span class="test2 B">B2</span>
    <span class="test3 B">B3</span>
  </div>
</div>

<div class="test">
  <div>
    <span class="test1 C">C1</span>
    <span class="test2 C">C2</span>
    <span class="test3 C">C3</span>
  </div>
</div>

JavaScript

const test = [...document.querySelectorAll('.test')]

const eachContains = (parents, ...selectors) => {
  const selectorsLength = selectors.length;
  const shouldFlatten = selectors[selectorsLength - 1] === true;
  const cleanedSelectors = shouldFlatten ? selectors.slice(0, selectorsLength - 1) : selectors;
  const results = parents.map(parent => {
    return cleanedSelectors.map(selector => {
      return [...parent.querySelectorAll(selector)];
    })
  });

  return shouldFlatten ? [].concat(...[].concat(...results)) :
    results;
}


const d = eachClosest(test, '.test1', '.test2', true)

console.log('d', d)