在jQuery中增加/减少.data()

Dom元素似乎是附加与该元素相关的数据的理想位置,但是访问它是代码繁琐的,并且可能效率低下。

目前我正在做这样的事情来增加:

$('#the-thing').data({ counter: $('#the-thing').data('counter') + 1 }) 

是否有更快的方法来增加存储在jQuery对象的.data()中的数字?

更好:

 var data = $('#the-thing').data(); data.counter += 1; // `$('#the-thing').data().counter += 1` should work too 

这避免了两次调用数据方法。 文档还说:

直接使用对象获取或设置值比单独调用.data()获取或设置每个值更快。


如果你真的想要,你可以创建一个函数:

 function add(sel, prop, val) { var data = $(sel).data(); data[prop] += val; } 

正如@Zirak指出的那样,如果你经常打这个电话,插件可能是最好的选择:

 (function($) { $.fn.inc = function(prop, val) { return this.each(function() { var data = $(this).data(); if(!(prop in data)) { data[prop] = 0; } data[prop] += val; }); } }(jQuery)) 

可用于:

 $('#the-thing').inc('counter', 1); $('#the-thing').inc('counter', -1); 

我知道inc不是一个好的方法名称,因为它表明你只能增加价值。 但我想不出更好的东西……我愿意接受建议:)