Jquery 按内容/最后一个单词对元素组进行排序

我试图按照内容的最后一个单词对下面重复的元素

（.name）

进行排序。例如姓。我可以分别选择和包装最后的单词，但不能按姓氏排序。我怎样才能做到这一点

$（函数（）{
$（'.name'）.html（函数（i，html）{
返回html.replace（/（\w+）$/，“$1”）；
});
var$sortPlate=$（“#板”）；
$sortPlate.children（“.name”）.children（“.sort by”）.parent（）.detach（）.sort（函数（a，b）{
返回$（a.text（）.localeCompare（$（b.text（））；
}).appendTo（$sortPlate）；
});
.name{
宽度：100%；
字体大小：24px；
颜色：绿色；
边缘底部：15px；
}
.分类{
颜色：红色；
}

小德卡
Chibueze Okechukwu
安吉丽娜·朱莉
迈克尔乔丹
克里斯·奥科伦杜
安吉拉区
小提琴：

$（函数（）{
$（'.name'）.html（函数（i，html）{
返回html.replace（/（\w+）$/，“$1”）；
});
var$sortPlate=$（“#板”）；
$sortPlate.children（“.name”）.children（“.sort by”）.parent（）.detach（）.sort（函数（a，b）{
返回$（a）.text（）.split（“”）[1].localeCompare（$（b）.text（）.split（“”）[1]）；
}).appendTo（$sortPlate）；
});

你几乎做到了，只需在空格中拆分文本，得到最后一个索引，即姓氏。这是一种又快又脏的方式。您可以清理那里的代码，以确保在没有空间的情况下不会抛出错误。
尝试使用
String.prototype.match（）
和
RegExp
/\w+/g

，删除对

.children（）

，

.detach（）的调用。

$（函数（）{
$（“.name”）.html（函数（i，html）{
var match=html.match（/\w+/g）；
返回匹配项[0]+“”+匹配项[1]+“”
}).get（）.sort（函数（a，b）{
返回$（“>.sort by”，a.text（）.localeCompare（$（“>.sort by”，b.text（））；
}).forEach（函数（val）{
$（val）.appendTo（val.parentElement）；
});
})

.name{
宽度：100%；
字体大小：24px；
颜色：绿色；
边缘底部：15px；
}
.分类{
颜色：红色；
}

小德卡
Chibueze Okechukwu
安吉丽娜·朱莉
迈克尔乔丹
克里斯·奥科伦杜
安吉拉区

如果案例如图所示，我该如何让它工作？@SleekGeek我需要在fiddle中看到一个更大的示例，以确定出了什么问题。我不知道在加载页面之前包装姓氏如何阻止这一点。它简化了事情。有没有一个技术上的原因让你不能这么做呢？然后我会写下HTML来实现我需要javascript来完成的完美场景。比如：

$(function () {

    $('.name').html(function (i, html) {
        return html.replace(/(\w+)$/, '<span class="sort-by">$1</span>');
    });

    var $sortPlate = $("#plate");
    $sortPlate.children(".name").children(".sort-by").parent().detach().sort(function (a, b) {
        return $(a).text().split(' ')[1].localeCompare($(b).text().split(' ')[1]);
    }).appendTo($sortPlate);

});