jquery increment number using .each()

Question

how do i increment id using .each() function.

$("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});
});

let say, there are 3 checkboxes are checked! so the id will be incrementing until 3(1,2,3).

i forgot to mention var id_bookslot = data. data which is an id that i retreive from database. let say it starts with 1234. and everytime .each() generate, it will increment by 1. 1234, 1235, 1236

Solution 1

If your goal is to do a post for each checkbox, and to give an index or smoething, each gives you an index you can use (also, avoid writing $(this) repeatedly, it's wasteful):

$("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
    }
  );
});

Also note that $(this).length will always be 1, but you weren't using your counter variable anyway, so I just removed it. If you use it but just didn't quote the code that is, do this:

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
    }
  );
});

...and use checked.length for your counter variable.

Solution 2

The each() method allows you to use the index of the element. That's likely the best way to accomplish this.

$("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});
});

I added +1 since the index is a 0 index and you seem to want it to start at 1.

Solution 3

You would have to move the variable outside the closure:

var id_bookslot = 0;

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

While this may work, it always seems a bit hack-y to me. You might want to think about another cleaner way to accomplish your goal (like using a traditional for loop so you have the current index available to you).

Solution 4

Use the closure:

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
   });
});

Note that I removed your count variable, which was always 1 ($(this) inside the callback being the individual element in the iteration) and which was never used.

View more solutions

Comments

[Pointy]

The "counter" value will always be 1, because this inside the ".each()" function will always be a single DOM element.

[Lightness Races in Orbit]

@Pointy: Indeed. (But he doesn't use that variable so it probably doesn't matter.)

[Pointy]

Yes I was just noting it as, well, a note :-)

[Rudie]

You might say he pointed out something funny. Ha ha

[tonoslfx]

J: thanks alot. i forgot to mention var id_bookslot = data. data which is an id that i retreive from database. let say it starts with 1234. and everytime .each() generate, it will increment by 1. 1234, 1235, 1236

[tonoslfx]

thanks. i tried your code. var id_bookslot =data, id_bookslot++ or ++id_bookslot'. data` is an id from database. says 1234 then increment by 1. but seems the above code instead insert 1234 it inserting 1235

[MacAnthony]

If that truly is an index id, then it may be better to be handled by the php script than a client side solution. You could get concurrency issues with multiple instances of the web page open.

[T.J. Crowder]

@boyee: Updated to use data, and since index will start at 0, I add one to it as well. Note what @MacAnthony says, though, unique IDs are best doled out by the data store, not the client browser. :-)

[MacAnthony]

Thanks, didn't notice what they were doing with counter since it wasn't a part of the immediate issue.