2013-02-06 33 views
1

排序标签我有这样的HTML与属性

<td colspan="4" class="item"> DERBY LINE, VT 05830<br> 
    <label for="" data-sort="16.26">UPS Ground $16.26</label><br> 
    <label for="" data-sort="27.57">UPS 3 Day Select&reg; $27.57</label><br> 
    <label for="" data-sort="33.87">UPS 2nd Day Air&reg; $33.87</label><br> 
    <label for="" data-sort="72.82">UPS Next Day Air $72.82</label><br> 
    <label for="" data-sort="7.99">USPS Priority $7.99</label><br> 
    <label for="" data-sort="9.61">FEDEX SmartPost&reg; FedEx Delivered Via USPS $9.61</label><br> 
    &nbsp; 
    <input type="button" name="Button5" id="Button5" onmouseout="this.className='btn'" onmouseover="this.className='btn_over'" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" value="Clear" class="btn"> 
</td> 

,我需要它的“数据排序”属性是排序,现在我使用 this element sorter 但是当我运行的脚本它返回这个

<td colspan="4" class="item"> DERBY LINE, VT 05830<br> 
    <label for="" data-sort="16.26">UPS Ground $16.26</label><br> 
    <label for="" data-sort="27.57">UPS 3 Day Select&reg; $27.57</label><br> 
    <label for="" data-sort="33.87">UPS 2nd Day Air&reg; $33.87</label><br> 
    <label for="" data-sort="7.99">USPS Priority $7.99</label><br> 
    <label for="" data-sort="72.82">UPS Next Day Air $72.82</label><br> 
    <label for="" data-sort="9.61">FEDEX SmartPost&reg; FedEx Delivered Via USPS $9.61</label><br> 
    &nbsp; 
    <input type="button" name="Button5" id="Button5" onmouseout="this.className='btn'" onmouseover="this.className='btn_over'" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" value="Clear" class="btn"> 
</td> 

你可以看到它运行,但由于某种原因,它只得到attr的第一个数字。我正在使用的呼叫如下:

$('.item label').sortElements(function(a, b){ 
    return $(a).attr("data-sort") > $(b).attr("data-sort") ? 1 : -1; 
});  

我在做什么错?

回答

5

看起来它目前将每个值视为一个字符串,并按照相应的顺序1-9对它们进行排序。您应该使用parseFloat()将字符串中的值转换为浮点数,以确保正确地完成比较:

$('.item label').sortElements(function(a, b){ 
    return parseFloat($(a).attr("data-sort")) > parseFloat($(b).attr("data-sort")) ? 1 : -1; 
}); 

或者使用.data()方法来代替,这将自动解释这些数字作为花车:

$('.item label').sortElements(function(a, b){ 
    return $(a).data("sort") > $(b).data("sort") ? 1 : -1; 
}); 
+0

你是对的,它比较字符串:' “23”> “3” ===假', –

+0

感谢你们所有人,这两个解决方案工作.. –

+0

@ Blazemonger - 我没有阅读'.data()'紧密,但它确实试图解释数据类型。 “每一次尝试都会将字符串转换为JavaScript值(这包括布尔值,数字,对象,数组和空值),否则会将其保留为字符串。”真棒,感谢信息=) – Chase