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>

Answer 2

关于你究竟想要什么，我有点难以理解，但我仍然想出一个小提琴。

我创建了一个从1到5的random个数字，然后使用jquery＆＃39; s li函数循环遍历每个each，然后检查li.hasClass是否为random $(document).ready(function(){ var random=Math.floor((Math.random() * 5) + 1); $('li').each(function(){ if($(this).hasClass(random)){ $(this).attr('data-slide-to',random); } }); });。如果这没有意义，请查看代码和小提琴。

jQuery代码：

{{1}}

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

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

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

2 个答案: