Jquery从一个带有.text的值中减去1,并保留html



我正试图用jQuery从一个值中减去1。我已经这样做了:

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

问题是,从中减去的<a>看起来像这样:

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

所以上面的jquery会从值中减去1(一),但也会删除图像!我如何才能做到保持图像为html?

您可以将图像存储在一个临时变量中,然后使用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,该数字将被正确解析
  • CCD_ 5选择具有类别CCD_ 6的所有元素。使用$('notis').text($('notis').text()-1)时,类为notis的所有元素都将包含第一个.notis元素的值(因为$('.notis').text()返回第一个.notis的值)。这就是我在代码中使用.each的原因
  • 当您要多次使用$(this)时,值得将变量$(this)存储在临时变量中,以提高效率

可能有更好的解决方案,但您可以保存链接元素的子元素,并在更改文本后重新附加它们:

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

下面是一个演示:http://jsfiddle.net/epuxy/(点击链接时,请参阅底部的数字更改)

我建议将数字封装在<span>中并替换其内容。

将3封装在div或span(首选)类中,然后从那里执行。

最好的解决方案是在数字周围加一个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

最新更新