ansaurus

Question

How to add an increment(1) to the value of an element with JQuery

Answer 1

A:

You need parseInt to handle strings as numbers.

$("#shortfall").text(parseInt($("#shortfall").text()) + 1);

BalusC 2009-11-06 14:26:57

That could cause some confusion if the initial value is, say, "077": parseInt("077")+1 = 64.

Matthew Wilson 2009-11-06 14:30:48

Haha good one. But who uses octals nowadays? =)

BalusC 2009-11-06 14:31:24

How did you determine it was an integer? What if it is a decimal? parseInt( "0.34" ) = 0

tvanfosson 2009-11-06 14:33:04

@tvanfosson: Then just use `parseDouble`? =) I however do not expect that the values are all doubles if he ask to increment the value with 1, so I consider that comment very nitpicky.

BalusC 2009-11-06 14:36:25

@BalusC: No-one deliberately uses octals. But people could accidentally use them.

Matthew Wilson 2009-11-06 15:35:14

Answer 2

+1 A:

By the time it gets to the browser, your expression will have been evaluated and turned into a number. To use jQuery you'd simply get the text value of the span, convert it to a number, then replace the text value. You will need to convert the value to a number before doing the addition or it will do string concatenation.

$("#shortfall").each( function() {
    $(this).text( Number($(this).text()) + 1 );
});

Updated: I'm using each to show how you would do this using a generic selector that might accept a collection of inputs. In your case, if you know it matches exactly one element, you might optimize it at the risk of having to rewrite it if you wanted the code to apply to multiple elements.

var span = $("#shortfall");
span.text( Number( span.text() ) + 1 );

Updated: need to use text() (or html()) since the element is a SPAN, not an input.

tvanfosson 2009-11-06 14:27:16

what is this each() function for? There's only one of it.

BalusC 2009-11-06 14:28:32

I think the value can only be obtained by $('#shortfall).attr('value');

Steven 2009-11-06 14:29:29

@Steven: no, by text(). It is not an attribute, but just the body.

BalusC 2009-11-06 14:30:45

@BalusC - it's more general to assume that the selector results in a collection. If it does, then you don't want to use text which will aggregate the innerText of all the matched elements. Using the each function allows the code to still work if the selector is changed to match multiple elements.

tvanfosson 2009-11-06 14:37:14

@tvanfosson: The problem lies somewhere else if the ID (yes, the identifier) selector returns more than one element.

BalusC 2009-11-06 14:38:32

@BalusC -- my point was that if you change the selector, my code still works as is. It is, therefore, more general because it recognizes that jQuery returns a collection of objects. Your code assumes that the collection only has one element because of the semantics of the selector. It's personal preference and I've updated to show the alternative, but I choose to make my code more robust initially with respect to the selector.

tvanfosson 2009-11-06 14:42:37

@tvanfosson: sure it may be a good practice. But it should already at design level be spotted whether the element in question is unique or not. If so, use id. If not, use class. The jQuery only comes hereafter.

BalusC 2009-11-06 15:00:18

ansaurus

tags:

views:

answers:

How to add an increment(1) to the value of an element with JQuery

related questions