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

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

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

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

工作 sn-p：-

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

Answer 3

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

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

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