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

Question

我有一系列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，并将其值添加到相应的索引号中。但是我总是在循环内得到相同的数字。我该如何解决？

Answer 1

只需使用the callback version of attr：

$('.block').attr('order', function(index) {
  return index;
});

$(document).ready(function() {
  $('.block').attr('order', function(index) {
    return index;
  });
  // Showing it worked:
  $('.block').each(function(index) {
    console.log("index = " + index + ", order = " + $(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>

Answer 2

对于每次迭代，您始终使用整个选定对象集，请在函数$.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>

Answer 3

您应该在this循环内使用each，而不是为所有.block元素设置order属性。另外，应该添加数据属性并使用order，而不是添加data-order属性。

$(document).ready(function() {
  $('.block').each(function(i) {
    $(this).attr('data-order', i+1); 
  });
  $('.block').each(function(){
      console.log($(this).data('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>

Answer 4

您可以使用data- *属性功能来代替使用order作为属性。这是添加自定义数据的推荐方法。

    $(document).ready(function() {
      $('.block').each(function(index) {
        $(this).data('order', index + 1);
        console.log($(this).data('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>