我的 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 感到满意。
最佳答案
这样的东西会有帮助吗
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>
关于javascript - 如何检查类然后替换每个元素的 data-id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40115858/