как применить этот js ко всем спискам ul?

Рейтинг: 0Ответов: 1Опубликовано: 27.05.2023

как применить этот js ко всем спискам ul? или к определенным классам? чтобы считались для каждого сначала

  const ul = document.querySelector('ul');
  countnumber = 0; 
  for (child of ul.children){
    countnumber += 1;
    child.style.setProperty('--inc-step', countnumber);
  }
    :root {
      --inc-step: 1;
    }

    ul {
      list-style: none; /* прячем маркеры */
      padding-left: 0; 
    }

    ul li{
      opacity: 0.3;
    }

    ul.active li{
      transition: opacity 0.3s linear, top 0.3s linear;
      opacity: 1;
      -webkit-transition-delay: calc(var(--inc-step)*0.1s);
      -moz-transition-delay: calc(var(--inc-step)*0.1s);
      -ms-transition-delay: calc(var(--inc-step)*0.1s);
      -o-transition-delay: calc(var(--inc-step)*0.1s);
      transition-delay: calc(var(--inc-step)*0.1s);
    }
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

вставил ответ InDevX, все работает спасибо.

const ul = document.querySelectorAll('ul'); [...ul].forEach(function (li) { for (let [index, elem] of [...li.children].entries()){ elem.style.setProperty('--inc-step', index+1); } });
    :root {
      --inc-step: 1;
    }

    ul {
      list-style: none; /* прячем маркеры */
      padding-left: 0; 
    }

    ul li{
      opacity: 0.3;
    }

    ul.active li{
      transition: opacity 0.3s linear, top 0.3s linear;
      opacity: 1;
      -webkit-transition-delay: calc(var(--inc-step)*0.1s);
      -moz-transition-delay: calc(var(--inc-step)*0.1s);
      -ms-transition-delay: calc(var(--inc-step)*0.1s);
      -o-transition-delay: calc(var(--inc-step)*0.1s);
      transition-delay: calc(var(--inc-step)*0.1s);
    }
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

const ul = document.querySelectorAll('ul'); [...ul].map(li => [...li.children].map((el, idx) => el.style.setProperty('--inc-step', idx+1)));
    :root {
      --inc-step: 1;
    }

    ul {
      list-style: none; /* прячем маркеры */
      padding-left: 0; 
    }

    ul li{
      opacity: 0.3;
    }

    ul.active li{
      transition: opacity 0.3s linear, top 0.3s linear;
      opacity: 1;
      -webkit-transition-delay: calc(var(--inc-step)*0.1s);
      -moz-transition-delay: calc(var(--inc-step)*0.1s);
      -ms-transition-delay: calc(var(--inc-step)*0.1s);
      -o-transition-delay: calc(var(--inc-step)*0.1s);
      transition-delay: calc(var(--inc-step)*0.1s);
    }
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>