Как сделать, чтобы код работал для все классов?

Question

Как сделать, чтобы данный код применялся ко всем .productdetails?

    const ul = document.querySelector('.productdetails');

    const data = [...ul.children].reduce((acc, n) => {
      const k = n.innerText[0].toLowerCase();
      (acc[k] = acc[k] || []).push(n.outerHTML);
      return acc;
    }, {});

    const html = Object
      .entries(data)
      .map(([ k, v ]) => `<div class="hua-rotate">${k}</div><ul class="${k}-litter">${v.join('')}</ul></div>`)
      .join('');

    ul.insertAdjacentHTML('afterend', html);
    ul.remove();

<ul class="productdetails">
 <li><a>Acer</a></li>
  <li><a>Xiaomi</a></li>
    <li><a>Samsung</a></li>
</ul>

<ul class="productdetails">
 <li><a>Acer</a></li>
  <li><a>Xiaomi</a></li>
    <li><a>Samsung</a></li>
</ul>

Answer 1

Что то типо этого ?

const ul = document.querySelectorAll('.productdetails');
[].forEach.call(ul, (item) => {
    const data = [...item.children].reduce((acc, n) => {
    let t = n.innerText.indexOf(' ') != -1 ? n.innerText.split(' ')[1] : n.innerText;
    let k = t[0].toLowerCase();
    (acc[k] = acc[k] || []).push(t);
    return acc;
  }, {});
  const html = Object
    .entries(data)
    .map(([ k, v ]) => `<div class="hua-rotate">${k}</div><ul class="${k}-litter">${v.join('')}</ul></div>`)
    .join('');

  item.insertAdjacentHTML('afterend', html);
  item.remove();
});

<ul class="productdetails">
 <li><a>Заголовок Acer</a></li>
  <li><a>Заголовок Xiaomi</a></li>
    <li><a>Заголовок Samsung</a></li>
</ul>

<ul class="productdetails">
 <li><a>Acer</a></li>
  <li><a>Xiaomi</a></li>
    <li><a>Samsung</a></li>
</ul>

БЛОГ НА HUSL

Как сделать, чтобы код работал для все классов?

Ответы (1 шт):