javascript - 如何检查类然后替换每个元素的 data-id

Question

我的 HTML 标签如下:

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="{dynamic.ID}"></li>

其动态生成最多 1 到 5 次。

如何检查每个 li 类，然后将其元素 data-slide-to=""内容属性更改为特定值？例如不同的数字。

例如，在 DOM 上，内容是这样的:

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="1"></li>

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="2"></li>

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="3"></li>

并像这样动态重写它:

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="0"></li>

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="1"></li>

<li class="myclass" data-target="#carousel-example-generic" data-slide-to="2"></li>

vanilla Java Script 是我想做的，但我想我也会对 jQuery 感到满意。

Answer 1

这样的东西会有帮助吗

var li = document.querySelectorAll('.myclass');

for (var i = 0; i < li.length; i++) {
  // for demo purpose, read existing value into the li's inner text
  li[i].textContent = 'old value: ' + li[i].getAttribute('data-slide-to');
  
  // change it
  li[i].setAttribute('data-slide-to', i);

  // for demo purpose, read it back into the li's inner text to show new value
  li[i].textContent += ' - new value: ' + li[i].getAttribute('data-slide-to');

}

<ul>
  <li class="myclass" data-target="#carousel-example-generic" data-slide-to="1"></li>

  <li class="myclass" data-target="#carousel-example-generic" data-slide-to="2"></li>

  <li class="myclass" data-target="#carousel-example-generic" data-slide-to="3"></li>
</ul>