2016-01-12 96 views
0

我想对要替换的姓氏和文本进行排序,但我无法做到。我试过以下。JQuery按姓氏排序项目

HTML

<div id="sort-by-name"> 
    <table> 
    <tbody> 
     <tr> 
     <tr> 
      <td class="names"> 
      <span class="toggle"></span> Betty j. Sean 
      </td> 
     </tr> 
     <tr> 
      <td class="names"> 
      <span class="toggle"></span> Ali Khan 
      </td> 
     </tr> 
     <tr> 
      <td class="names"> 
      <span class="toggle"></span> Will Turner 
      </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

//排序名称

var items = []; 
$('#ByMember table tbody .irwMemberName').each(function() { 
    items.push($(this).html()); 
}); 
items.sort(); 
console.log(items); 

我也尝试添加一个类来姓氏的字。然后应用上面的排序函数,它实际上排序所有姓氏,但我怎么可以整理和替换。

$("#sort-by-name table tbody .names").html(function(index, old) { 
    return old.replace(/(\b\w+)$/, '<span class="name_identifier">$1</span>'); 
}); 

请让我知道,如果我不清楚。另外忽略任何错字的我已修改代码在这里发布。

+0

你的问题不是很清楚。你可以添加一些细节还是尝试解释它好一点? – GAntoine

+0

我只是想对姓氏按字母排序。 –

回答

1

你可以这样做。检查小提琴:Fiddle

var els = $("#sort-by-name table tbody tr") 
.sort(function(a,b){ 
    var t1 = $(a).find('.names')[0].innerText.split(' ').pop(), 
      t2 = $(b).find('.names')[0].innerText.split(' ').pop(); 

    if(t2 < t1) { 
     return 1; 
    } else { 
     return -1; 
    } 
}) 
.each(function() { 
    var t = this.innerText.replace(/(\w+)$/, '<span class="name_identifier">$1</span>'); 
    return $(this).html(t); 
}); 
$('#bodyid').html(els); 
+0

它不工作...请验证你的小提琴。它应该按“姓氏”排序。 –

+0

汗,肖恩和特纳与原来的肖恩,汗,特纳完全分离。为了您的方便,我添加了Willy Baba。 –

+0

是的,它的工作正常在铬我检查在火狐'44.0'它没有在那里工作。 –

1

要添加到尼古拉的回答,我已经建立了对Firefox和Chrome浏览器的两个版本。

var els = $("#sort-by-name table tbody tr") 
    .sort(function(a, b) { 
    var t1 = $(a).find('.names')[0].textContent.split(' ').pop(), 
     t2 = $(b).find('.names')[0].textContent.split(' ').pop(); 

    if (t2 < t1) { 
     return 1; 
    } else { 
     return -1; 
    } 
    }) 
    .each(function() { 
    debugger; 
    var t = this.textContent.trim().replace(/(\w+)$/, '<span class="name_identifier">$1</span>') 
    return $(this).html(t); 
    }); 
$('#bodyid').html(els); 

JSFiddle