如何使用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

只需使用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

您應該在each循環中使用this ，而不是為所有.block元素設置 order 屬性。 此外，不要添加order屬性，而應該使用 data 屬性並使用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>