javascript - 根据总 jQuery 更新 HTML 属性

Question

我有一个 slider ，列表中的项目会因页面而异。

所以，我要做的是运行一个循环来更新 data-slide-to为每张幻灯片添加正确编号的属性。

经过大量的试验和错误，我写了一些几乎有效的东西...

我使用 $.each()获取所有 <li> 的索引数组的，我使用 nth:child选择器并使用索引选择 <li>然后使用 .attr()使用索引号更改 HTML 属性。

完整代码:

var sliderList = $("ul#list li");

function updateDataNum(){
  $.each(sliderList, function( index, value ) {
    $( "ul#list li:nth-child" + '(' + index + ')').attr("data-slide-to",index);
  });
}

updateDataNum();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li data-target="#video-slider" data-slide-to="">One</li>  
  <li data-target="#video-slider" data-slide-to="">Two</li>  
  <li data-target="#video-slider" data-slide-to="">Three</li> 
  <li data-target="#video-slider" data-slide-to="">Four</li>
</ul>

代码如何开始

<ul id="list">
  <li data-target="#video-slider" data-slide-to="">One</li>  
  <li data-target="#video-slider" data-slide-to="">Two</li>  
  <li data-target="#video-slider" data-slide-to="">Three</li> 
  <li data-target="#video-slider" data-slide-to="">Four</li>
</ul>

我想要发生的事情

<ul id="list">
  <li data-target="#video-slider" data-slide-to="0">One</li>  
  <li data-target="#video-slider" data-slide-to="1">Two</li>  
  <li data-target="#video-slider" data-slide-to="2">Three</li> 
  <li data-target="#video-slider" data-slide-to="3">Four</li>
</ul>

实际上发生了什么

<ul id="list">
  <li data-target="#video-slider" data-slide-to="1">One</li>  
  <li data-target="#video-slider" data-slide-to="2">Two</li>  
  <li data-target="#video-slider" data-slide-to="3">Three</li> 
  <li data-target="#video-slider" data-slide-to>Four</li>
</ul>

Answer 1

nth-child 从 1 开始，而 index 从 0 开始。

更改为:

$( "ul#list li:nth-child" + '(' + (index + 1) ...

var sliderList = $("ul#list li");

function updateDataNum(){
  $.each(sliderList, function( index, value ) {
    $( "ul#list li:nth-child" + '(' + (index + 1) + ')').attr("data-slide-to",index);
  });
}

updateDataNum();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li data-target="#video-slider" data-slide-to="">One</li>  
  <li data-target="#video-slider" data-slide-to="">Two</li>  
  <li data-target="#video-slider" data-slide-to="">Three</li> 
  <li data-target="#video-slider" data-slide-to="">Four</li>
</ul>

或者，您可以像这样一次完成所有作业:

$("#list li").attr("data-slide-to", function(index) {
  return index;
});

var sliderList = $("#list li");

function updateDataNum() {
  $("#list li").attr("data-slide-to", function(index) {
    return index;
  });
}

updateDataNum();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li data-target="#video-slider" data-slide-to="">One</li>  
  <li data-target="#video-slider" data-slide-to="">Two</li>  
  <li data-target="#video-slider" data-slide-to="">Three</li> 
  <li data-target="#video-slider" data-slide-to="">Four</li>
</ul>

在 ES6 中，这可以简化为:

$("#list li").attr("data-slide-to", index => index);

var sliderList = $("#list li");

function updateDataNum() {
  $("#list li").attr("data-slide-to", index => index);
}

updateDataNum();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li data-target="#video-slider" data-slide-to="">One</li>  
  <li data-target="#video-slider" data-slide-to="">Two</li>  
  <li data-target="#video-slider" data-slide-to="">Three</li> 
  <li data-target="#video-slider" data-slide-to="">Four</li>
</ul>