如何使用jquery根据索引号在一系列元素上添加自定义属性

debugcn 发表于 Dev

佐贺达

我有一系列div元素，我想根据它们的索引号添加自定义属性jQuery

这是我的代码片段：

$(document).ready(function() {
  $('.block').each(function() {
    $('.block').attr('order', ($('.block').index() + 1).toString()); // not sure what to add
    // console.log(($('.block').index() + 1).toString());
  })
});

.block {
  background: powderblue;
  margin-bottom: 10px;
  min-height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>

我正在尝试添加一个属性，order并将其值添加到相应的索引号中。但我总是在循环内得到相同的数字。我该如何解决？

他

您总是在每次迭代中使用整个选定对象集，在函数的处理程序中使用当前对象 $.each()

$(document).ready(function() {
  // Use the param index
  $('.block').each(function(index) {
    // The context `this` points to a specific element.
    $(this).attr('order', index + 1);
    console.log($(this).attr('order'));
  })
});

.block {
  background: powderblue;
  margin-bottom: 10px;
  min-height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。