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

아, 여기 okies 설명 (나는이 플러그인을 많이 사용하지 않은 heres 내가 뭘 찾았는지) : 여기에 작업 데이터를 참조하십시오 : http://jsfiddle.net/wJzNE/44/ ** 그리고 ** 여기에 또 다른 구현 : http://jsfiddle.net/wJzNE/49/ 작은 정렬은 .data() 쿼리 api를 사용하여 텍스트를 찾지 만 serviceid를 래핑하지 않으면 .. ""(따옴표)에서 찾을 수 없습니다 뭐든지 내가 내 대답을 희망을 업데이 트합니다 JSfiddle 당신이 더 나은 이해하는 데 도움이 당신이 예를 들어 –

mmh ($ ul # late-services> li ')를 대체 할 경우. tsort ('span ', {data :'foo '}) ; $ ('ul # late-services> li'). tsort ({data : 'serviceid'});, 더 잘 작동하지 않습니다. – Roubachof

에 이 경우 작동해야하는 경우 : $ ('ul # late-services'). tsort ('li', {attr : 'data-service-id'});

출처

2012-03-23 23:29:33 dzida

tinysort 'data'설정을 잘못 사용하고 있습니까? – Roubachof

tinysort 및 데이터 특성으로 정렬

답변

관련 문제