Jquery вычитая 1 из значения с .text и сохраняя HTML

Question

Я пытаюсь вычесть 1 (один) из значения с помощью jQuery.Мне удалось сделать это так:

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

Проблема в том, что <a> это вычитание выглядит следующим образом:

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

Таким образом, jquery выше будет вычесть(один) от значения, но и удалить изображение!Как я могу сделать это и сохранить изображение HTML?

Answer 1

Вы можете сохранить изображение во временной переменной, а затем добавить его к узлу, используя метод prepend:

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

Демо: http://jsfiddle.net/sPnhL/

Дополнительные примечания:

• Используйте parseInt( ... , 10) вместо parseInt( ... ). Числа с префиксом ноль будут обрабатываться в разных браузерах непоследовательно. Если указать основание 10, число будет проанализировано правильно.
• $('.notis') выделяет все элементы с классом notis. Когда вы используете $('notis').text($('notis').text()-1), все элементы с классом notis будут содержать значение первого .notis элемента (поскольку $('.notis').text() возвращает значение первого .notis). Вот почему я использовал .each в своем коде.
• Если вы собираетесь использовать $(this) более одного раза, стоит сохранить переменную $(this) во временной переменной для повышения эффективности.

Answer 2

Лучшее решение - поставить span вокруг вашего номера.Это приводит к лучшей производительности.

HTML

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

jQuery

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

Проверьте это jsFiddle

Answer 3

Оберните 3 в div или span (предпочтительный) класс и сделайте это оттуда.

Answer 4

Я бы предложил обернуть число в <span> и заменить его содержимое.

Answer 5

Возможно, будет лучшее решение, но вы можете сохранить дочерние элементы элемента ссылки и повторно присоединить их после изменения текста:

$('.notis').each(function (index, element) {
    var $children = $(this).children();
    $(this).text(parseInt($(this).text()) - 1).prepend($children);
});

Вот демоверсия: http://jsfiddle.net/epuxy/ (см. Число внизу, когда вы переходите по ссылке)