0

Как сделать, чтобы данный код применялся ко всем .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>

2
  • Пример в снипете сделайте рабочим, я не понял, что у вас не работает
    – doox911
    19 июл 2020 в 18:57
  • @doox911 обновил
    – Alex
    19 июл 2020 в 19:04

1 ответ 1

0

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

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>

7
  • Подскажите, а можно вместо первого слова взять второе слово от li?
    – Alex
    19 июл 2020 в 19:38
  • У меня есть данный код, но я пока что не слишком опытен, чтобы совместить их const secondWords = Array.from( document.querySelectorAll('h3'), h => h.innerText.split(' ')[1], );
    – Alex
    19 июл 2020 в 19:39
  • 1
    Не совсем понял, у вас же там только 1 слово, планируется что будет 2 и нужно будет только второе ?
    – uberchel
    19 июл 2020 в 19:40
  • Вы верно поняли задание, просто немного изменилась ситуация и я спросил в комментариях учетом нового условия
    – Alex
    19 июл 2020 в 20:03
  • 1
    Я поправил ответ, сейчас код работает как с 1 словом так и с 2-мя
    – uberchel
    19 июл 2020 в 20:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.