jquery 使用 .each() 递增数字

Question

如何使用 .each() 函数增加 id 。

$("input:checked").each(function(){
var counter = $(this).length();
var id_bookslot = data; //<-- increment id +1
var treatment_type = $(this).closest("div").attr("id");
var id_treatment = $(this).attr("class");
$.post("include/get_booking.php?insert", {id_bookslot: id_bookslot,id_treatment:id_treatment,treatment_type:treatment_type});
});

比方说，有 3 个复选框被选中！所以 id 将递增直到 3(1,2,3)。

我忘了提及 var id_bookslot = data. data 这是我从数据库中检索的 id。假设它以 1234 开头。每次 .each() 生成时，它都会增加 1。1234、1235、1236

Answer 1

each() 方法允许您使用元素的索引。这可能是实现这一目标的最佳方法。

$("input:checked").each(function( index ){
    var id_bookslot = index + 1; //<-- increment id +1
    var treatment_type = $(this).closest("div").attr("id");
    var id_treatment = $(this).attr("class");
    $.post("include/get_booking.php?insert", {id_bookslot: id_bookslot,id_treatment:id_treatment,treatment_type:treatment_type});
});

我添加了 +1，因为索引是 0 索引，而您似乎希望它从 1 开始。

Answer 2

如果您的目标是为每个复选框执行post，并提供索引或平滑，each 为您提供一个可以使用的索引（另外，避免重复编写 $(this) ，这是浪费的）：

$("input:checked").each(function(index) {
  var $this = $(this);
  var id_bookslot = data + index + 1;          // <== Using the index here
  var treatment_type = $this.closest("div").attr("id");
  var id_treatment = $this.attr("class");
  $.post("include/get_booking.php?insert", {
      id_bookslot:    id_bookslot,
      id_treatment:   id_treatment,
      treatment_type: treatment_type
    }
  );
});

另外请注意，$(this).length 将始终为 1，但无论如何您都没有使用 counter 变量，所以我只是将其删除。如果您使用它但只是没有引用代码，请执行以下操作：

var checked = $("input:checked");
checked.each(function(index) {
  var $this = $(this);
  var id_bookslot = data + index + 1;          // <== Using the index here
  var treatment_type = $this.closest("div").attr("id");
  var id_treatment = $this.attr("class");
  $.post("include/get_booking.php?insert", {
      id_bookslot:    index,
      id_treatment:   id_treatment,
      treatment_type: treatment_type
    }
  );
});

...并使用 checked.length 作为您的 counter 变量。

Answer 3

您必须将变量移到闭包之外：

var id_bookslot = 0;

$('input:checked').each(function(){
    id_bookslot++;
    // The rest of your code
});

虽然这可能有效，但对我来说总是有点 hack-y。您可能需要考虑另一种更简洁的方法来实现您的目标（例如使用传统的 for 循环，以便您可以使用当前索引）。

Answer 4

使用闭包：

var id_bookslot = 0;
$("input:checked").each(function() {

   id_bookslot++;

   var treatment_type = $(this).closest("div").attr("id");
   var id_treatment = $(this).attr("class");

   $.post("include/get_booking.php?insert", {
     id_bookslot:    id_bookslot,
     id_treatment:   id_treatment,
     treatment_type: treatment_type
   });
});

请注意，我删除了您的 count 变量，该变量始终为 1（回调中的 $(this) 是迭代中的单个元素），并且从来没有用过的。