javascript - Sorting HTML list by child attribute with Tinysort -

i sort list tinysort using 1st time element of li element.

<div class="box">     <ul>         <li><a href="#">john</a>             <div class="bubble">                 <p><strong>john</strong></p>                 <p>                     <time datetime="01/01/1950">01/01/1950</time> -                     <time datetime="10/02/2005">10/02/2005</time>                 </p>             </div>         </li>         <li><a href="#">alice</a>             <div class="bubble">                 <p>alice</p>             </div>         </li>         <li><a href="#">mary</a>             <div class="bubble">                 <p>mary</p>                 <p>                     <time datetime="01/02/1920">01/02/1920</time> -                     <time datetime="01/02/2015">01/02/2015</time>                 </p>             </div>         </li>     </ul> </div> 

so in case should say: mary - john - alice (or less correct, acceptable, be: alice - mary - john).

i have tried

tinysort('.box ul>li', {selector:'time',attr:'datetime'}); 

but messing list , sorting bubble div, not li. also, element without time ignored, because not pointing li.

alternatively add time attribute inside li element, less html dirty, better, since such attribute not add semantics. suggestions sort list few html modifications possible? potentially want make tinysort aware want sort lis , not bubbles.

the problem here attribute trying sort on not number handled string. add unix timestamp time element or list-element , sort on that. can server-side or client-side.

here's fiddle: https://jsfiddle.net/sjeiti/o9kv8be2/ , here's code (i lazy , added timestamp list-element, should add time element):

var listelements = document.queryselectorall('li'); (var = 0, l = listelements.length; < l; i++) {   var li = listelements[i],     time = li.queryselector('time'),     date = time && new date(time.getattribute('datetime'));   date && li.setattribute('data-timestamp', date.gettime()); } document.queryselector('button').addeventlistener('click', function() {   tinysort(listelements, {     data: 'timestamp'   }); });