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

How to check a class and then replace data-id for each element

本文关键字：替换 元素 data-id 然后 何检查 检查      更新时间：2023-09-26

我的HTML标签是这样的:

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

动态生成1到5次。

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

例如，在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>

香草Java脚本是我想做的，但我想我会很高兴与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>

你到底想要什么有点难以理解，但我还是想到了一把小提琴。

我创建了一个从1到5的random数字，然后使用jquery的each函数循环遍历每个li，然后检查random的li.hasClass。如果这没有意义，请查看代码和小提琴。

jQuery代码:

$(document).ready(function(){
var random=Math.floor((Math.random() * 5) + 1);
    $('li').each(function(){
    if($(this).hasClass(random)){
        $(this).attr('data-slide-to',random);
   }
  });
});

检查小提琴:https://jsfiddle.net/wxfr7sa0/1/

希望这有帮助!!如果这不是你想要的，请在评论中告诉我。

相关文章：