javascript sort DOM-элемент

Question

У меня есть элемент, который нужно сортировать.

<div id ="list"> 
    <span data-index= "11"> 
     <table> 
      <tr><td>abc</td></tr> 
     </table> 
    </span> 

    <span data-index= "1"> 
     <table> 
      <tr><td>deftd</td></tr> 
     </table> 
    </span> 

      <span data-index= "5"> 
     <table> 
      <tr><td>ddd</td></tr> 
     </table> 
    </span> 
</div> 

У меня был этот код, чтобы сортировать его:

function sortChildren(wrap, f, isNum) { 
    var l = wrap.children.length, 
     arr = new Array(l); 
    for(var i=0; i<l; ++i) 
     arr[i] = [f(wrap.children[i]), wrap.children[i]]; 
    arr.sort(isNum 
      ? function(a,b){ return a[0]-b[0]; } 
      : function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; } 
      ); 
    var par = wrap.parentNode, 
     ref = wrap.nextSibling; 
    par.removeChild(wrap); 
    for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]); 
    par.insertBefore(wrap, ref); 
} 

sortChildren(
    document.getElementById('list'), 
    function(li) { return +li.dataset.index; } 
); 

Этот код отлично работает в Google Chrome, но IE вызывает проблему для меня. Когда я перехожу IE в поле зрения совместимости, кода косяка работы и показать мне ошибку, как показано ниже:

Unable to get property 'index' of undefined or null reference 

Как я могу решить эту проблему?

Answer 1

HTMLElement.dataset поддерживается с IE11 на:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

вы должны использовать другие способы, чтобы получить "данные-индекс" значение: $(li).data("index") с помощью JQuery, например или li.getAttribute ("данных -index ") в plain js

Answer 2

Попробуйте с этой функцией. Если это не работает, вы можете использовать атрибут title вместо data-index.

function sortChildren(wrap, func) { 
    var children = new Array(); 
    wrap.children().each(function(){ 
     children[func(jQuery(this))] = jQuery(this).html(); 
    }); 
    wrap.html(''); 
    jQuery(children).each(function(index, element){ 
     wrap.append(element); 
    }); 
} 

sortChildren(
    jQuery('#list'), 
    function (element) { return parseInt(element.attr('data-index')); } 
); 

http://jsfiddle.net/5roe882y/