使用jquery计算自定义数据属性的长度

时间:2015-03-29 15:00:49

标签: jquery

我有自定义属性数据的链接

<a class="thumb" href="" 
 data-size1="All Size"                                                            
 data-size2="25cm - 15cm"                                                           
 data-size3="20cm - 10cm"                                                                                       
 data-price1="IDR 60,000"                                                            
 data-price2="IDR 60,000"                                                            
 data-price3="IDR 60,000">
</a>

实际上如何计算每个类型的数据,如data-size = 3,data-price = 3

由于

我试了但是没有成功

$(this).click(function() { 
             var numItems = $('li.grid-list a.thumb-links[data-size]').length;             
             alert(numItems); 
           });

1 个答案:

答案 0 :(得分:0)

JSON允许您将数组编码为字符串。因此,您可以在单个数据属性中存储任意数量的值,并通过一次调用来检索它。这简化了逻辑。

<a class="thumb" href="" 
   data-size="[\"All Size\",\"25cm - 15cm\",\"20cm - 10cm\"]" 
   data-price="[\"IDR 60,000\",\"IDR 60,000\",\"IDR 60,000\"]">
    some text
</a>

然后使用这些值,你可以简单地解码它们(单个函数调用)并拥有一个具有它所有优点的数组...

$(this).click(function(e) { 
    var dataSize = JSON.parse($(e.target).data('size'));
    var dataPrice = JSON.parse($(e.target).data('price'));
    var numItems = dataSize.length;             
    alert(numItems); 
});

注意:有趣的\字符可以逃避引号(")。它们通常根据您在运行时创建锚标记的方式自动生成...