Increasing a number by 1 using jquery?

Question

$('.fav').live('click', function(e){
    $(this).toggleClass('highlight');
    //increase the number by 1

html:

<li class="fav light_gray_serif">5</li>

how can i use jquery to increase the number between the li everytime its clicked? thanks

Answer 1

var num = parseInt($.trim($(this).html()));
$(this).html(++num)

Answer 2

You want to take a look at .html() or .text() . Here is an example:

$(this).text(function(i, t) {
    return Number(t) + 1;
});

Answer 3

HTML:

<span id="counter">0</span>

jQuery:

$('#counter').text(Number($('#counter').text())+1);

You can increase the counter when clicking an existing button like this:

$(document).on('click','#your-button', function(){
  $('#counter').text(Number($('#counter').text())+1);
});

Answer 4

Just use a plugin.

(function($) {
    $.extend($.fn, {
         "addOne": function() {
              var num = parseInt(this.text(), 10);
              this.text(++num);
         },
         "subtractOne": function() {
              var num = parseInt(this.text(), 10);
              this.text(--num);
         }
    });
}(jQuery))

Then call

$(".fav").live("click", function(e) {
     $(this).toggleClass("highlight").addOne();
});