Question

I’m trying to subtract 1 (one) from a value with jQuery. I’ve managed to do so like this:

$('.notis').text(parseInt($(".notis").text()) - 1);

Problem is that the <a> this is subtracting from looks like this:

<a href="#" class="notis"><img src="/images/icons/picture.png">3</a>

So the jquery above will subtract 1 (one) from the value, but also remove the image! How can I do this and keep the image html?

Answer 1

You can store the image in a temporary variable, then add it to the node using the prepend method:

$('.notis').each(function() {
    var $this = $(this);                        // <-- Reference to current elem
    var $img = $this.find('img');               // <-- Reference to <img>
    $this.text(parseInt($this.text(), 10) - 1); // <-- Your logic
    $this.prepend($img);                        // <-- Add image again.
});

Demo: http://jsfiddle.net/sPnhL/

Additional notes:

• Use parseInt( ... , 10) instead of parseInt( ... ). Numbers prefixed by a zero will be treated inconsistently across browsers. By specifygin the radix of 10, the number will be parsed correctly.
• $('.notis') selects all elements with class notis. When you’re using $('notis').text($('notis').text()-1), all elements with class notis will contain the value of the first .notis element (because $('.notis').text() returns the value of the first .notis). That’s why I used .each in my code.
• When you’re going to use $(this) more than once, it’s worth storing the variable $(this) in a temporary variable, for improved efficiency.