我正试图用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);