JQuery 按姓氏排序项目答案

【问题标题】：JQuery sort items by last nameJQuery 按姓氏排序项目
【发布时间】：2016-04-16 11:55:01
【问题描述】：

我想对要替换的姓氏和文本进行排序，但我做不到。我已经尝试过。

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>');
});

如果我不清楚，请告诉我。也忽略任何错字，我在这里修改了代码以供发布。

【问题讨论】：

你的问题不是很清楚。您能否补充一些细节或尝试更好地解释一下？
我只是想实现姓氏的字母排序。

标签： javascript jquery sorting html-table

【解决方案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);

【讨论】：

它不工作...请验证你的小提琴。它应该按last name排序。
它完全适合可汗、肖恩和特纳与原始的肖恩、可汗、特纳。为了您的方便，我添加了威利巴巴。
是的，它在 chrome 中工作正常我在 firefox 44.0 中检查它不在那里工作。
@AamirShahzad Firefox 使用 textContent property，而不是 innerText。
@AamirShahzad 我用 jQuery html() 函数替换了 innerText。它现在也可以在 Firefox 中使用。再次检查 - https://jsfiddle.net/ermakovnikolay/tf1um0tL/

【解决方案2】：

为了补充 Nikolay 的答案，我构建了一个适用于 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

【讨论】：