Question

我想要对要替换的姓氏和文本进行排序，但我无法做到。我试过跟随。

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函数中应用它实际上对所有姓氏进行排序，但我如何按顺序排序并替换。

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

如果我不清楚，请告诉我。同时忽略我在此处修改过代码的任何拼写错误。

Answer 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);

Answer 2

为了增加尼古拉的答案，我已经构建了一个适用于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

JQuery按姓氏排序项目

2 个答案: