使用jQuery有效地递增表格单元格

Question

这应该很简单。标题中的关键词是＆＃34;高效＆＃34;。

我有：

<td id="pieceCount">13</td>

我希望将单元格值增加14.单元格将始终只包含整数。为此，我目前有：

$("#pieceCount").text(parseInt($("#pieceCount").text()) + 14);

这很有效。但是，发送jQuery两次查找#pieceCount似乎效率低下。

我是否可以在外this调用中使用$(this)或text()来引用jQuery已找到的#pieceCount元素？或许还有另一种技术？

Answer 1

是的，尽可能重用选择器：

var $e = $("#pieceCount");
$e.text(~~$e.text()+ 14);

同样~~是整数转换的快捷方式

您也可以将功能传递给text，如下所示：

$("#pieceCount").text(function(){ return ~~$(this).text()+14 });

注意：正如@Archer指出的那样，您可以使用原始DOM元素的innerText属性来处理内部文本，但我倾向于回避jQuery的绝缘（以及VS中的intellisense）。并且当@A. Wolff指出时，现有的文本值作为参数传递给传递给text()的任何函数。

$("#pieceCount").text(function(i, t){ return ~~t+14 });

参考：https://api.jquery.com/text/#text-function

Answer 2

您可以使用text() ...

中的功能完成您的建议

$("#pieceCount").text(function() { return parseInt(this.innerText, 10) + 14; });

这是一个有效的例子（我为了简单起见使用了div）......

https://jsfiddle.net/ArchersFiddle/dqkcunno/