用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和數據屬性排序

回答

相關問題