用tinysort和数据属性排序

我想根据数据属性对列表进行排序tinysort。用tinysort和数据属性排序

首先列表：

<ul id="late-services" class="list"> 
<li data-service-id="23" data-criticality="1000"> 
    <span>Service 23</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="22" data-criticality="2000"> 
    <span>Service 22</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="24" data-criticality="500"> 
    <span>Service 24</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li>    
</ul>

然后调用tinysort：

$('ul#late-services>li').tsort('li', {data:'serviceId'});

我必须做一些错误的，但不知道是什么...

来源

2012-03-23 Roubachof

你好工作你的代码演示：http://jsfiddle.net/wJzNE/15/

更新：使用data: (option)执行此：http://jsfiddle.net/wJzNE/49/ & http://jsfiddle.net/wJzNE/52/ [代码] $（ 'UL＃后期服务>礼'）tsort的（”跨度”，{数据： '服务ID'}）;

有用的链接：http://tinysort.sjeiti.com/

ISS UE为 1）注意到内部错误Attr值;和2）内tsort的，不需要立在这里发现其中的差别：$('ul#late-services>li').**tsort({attr:'data-service-id'})**;

HTML

<!DOCTYPE html> 
<html dir="ltr"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="http://tinysort.sjeiti.com/scripts/jquery.tinysort.js"></script> 


    </head> 
    <body> 
<ul id="late-services" class="list"> 
<li data-service-id="23" data-criticality="1000"> 
    <span>Service 23</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="22" data-criticality="2000"> 
    <span>Service 22</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="24" data-criticality="500"> 
    <span>Service 24</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li>    
</ul> 


    </body> 
</html>

JqueryCode

$('ul#late-services>li').tsort({attr:'data-service-id'});

希望这会有所帮助，欢呼声

来源

2012-03-24 00:06:54

此处同样的评论，tinysort数据设置有什么问题？ – Roubachof 2012-03-24 00:48:00

嗯，这里的okies是解释（我没有用过这个插件，但继承了我发现的）：在这里看到工作数据：http://jsfiddle.net/wJzNE/44/ **和**另一个实现在这里： http://jsfiddle.net/wJzNE/49/所以最小的排序使用.data（）查询api来查找您的文本，但如果你不包裹你的serviceid，..“”（引号）它没有找到任何我会更新我的答案希望JSfiddle帮助你更好地理解，在你的例子中，如果我替换$（'ul＃late-services> li'），欢呼 – 2012-03-24 01:38:27

mmh。tsort（'span'，{data：'foo'}） ; by $（'ul＃late-services> li'）。tsort（{data：'serviceid'}）;，它效果不佳。 – Roubachof 2012-03-24 18:34:14

在你这种情况下应该工作： $（'ul＃late-services'）。tsort（'li'，{attr：'data-service-id'}）;

来源

2012-03-23 23:29:33 dzida

我滥用tinysort'data'设置吗？ – Roubachof 2012-03-23 23:34:22

用tinysort和数据属性排序

回答

相关问题