根据 jQuery 总数更新 HTML 属性<li>

Question

我有一个滑块，其中包含列表中的项目，该列表因页面而异。

因此，我要做的是运行一个循环，该循环将使用每张幻灯片的正确编号更新 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>

Answer 2

不要使用

attr('data-slide-to' 访问属性(，而是使用 jquery 内置的数据函数：

$('#list li').each(function(idx) { 
  $(this).data('slide-to', idx); 
});

每个函数已经带有一个从零开始的索引作为参数。

Answer 3

请使用如下所示$(this)简化您的代码：-

$( this).attr("data-slide-to",(index+1)); // since index started from 0 so +1 needed

工作片段：-

$(document).ready(function(){
  $.each($("ul#list li"), function(index) {
    $( this).attr("data-slide-to",(index+1));
  });
});

<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>