Question

我试图按照其内容的最后一个字对下面重复的元素(.name)进行排序。例如姓氏。我能够分别选择和包装跨度中的最后一个单词，但不能按姓氏对其进行排序。我怎样才能做到这一点？

＆＃13;

$(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().localeCompare($(b).text());
  }).appendTo($sortPlate);

});

＆＃13;

.name {
    width: 100%;
        font-size: 24px;
    color: green;
    margin-bottom: 15px;
}

.sort-by {
  color: red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
<div class="name">Deka Junior</div>
<div class="name">Chibueze Okechukwu</div>
<div class="name">Angelina Jolie</div>
<div class="name">Michael Jordan</div>
<div class="name">Chris Okorondu</div>
<div class="name">Angela Zones</div>
<div>

＆＃13;

Answer 1

小提琴：http://jsfiddle.net/1t2319q4/1/

$(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);

});

你几乎拥有它，只需将空格上的文本拆分并获取最后一个索引，即姓氏。这是快速而肮脏的方式。您可以清理那里的代码，以确保在没有空间的情况下不会抛出任何错误。

Answer 2

尝试将String.prototype.match()与RegExp /\w+/g一起使用，删除对.children()，.detach()

的来电

$(function() {
  $(".name").html(function(i, html) {
      var match = html.match(/\w+/g);
      return match[0] + " <span class=sort-by>" + match[1] + "</span>"
    }).get().sort(function(a, b) {
      return $("> .sort-by", a).text().localeCompare($("> .sort-by", b).text());
    }).forEach(function(val) {
      $(val).appendTo(val.parentElement);
    });
})

.name {
  width: 100%;
  font-size: 24px;
  color: green;
  margin-bottom: 15px;
}
.sort-by {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
  <div class="name">Deka Junior</div>
  <div class="name">Chibueze Okechukwu</div>
  <div class="name">Angelina Jolie</div>
  <div class="name">Michael Jordan</div>
  <div class="name">Chris Okorondu</div>
  <div class="name">Angela Zones</div>
  <div>

按内容/最后一个Word排序元素组

2 个答案: