jQuery - 创建一个简单的字母数字 .sort() [重复]

Question

我有一个可以进行基本数字排序的函数，但我想要一些可以像这样对字母数字数据进行排序的函数：

1 Alpha
2 Beta
3 Delta
Romeo 1
Romeo2
Romeo 3

你可以运行下面的代码，或者有一个小提琴，现在只有 Age 按钮在工作，Name 和 Room 不工作。 https://jsfiddle.net/goldencarers/hfy7wega/

function clientSort(column,direction)
{
  var $divs = $(".client");

  if (direction=='asc')
  {
    var alphaDivs = $divs.sort(function (a, b) {
      return $(a).data(column) - $(b).data(column);
    });
    $(".list").html(alphaDivs);
  }
  else
  {
    if (direction=='desc')
    {
      var alphaDivs = $divs.sort(function (a, b) {
        return $(b).data(column) - $(a).data(column);
      });
      $(".list").html(alphaDivs);
    }
  }
}

$(document).ready(function()
{
  $('.sort_clients').click(function(e)
                           {
    var column = $(this).data('column');
    var direction = $(this).data('direction');
    
    console.log(column + ' ' + direction);
      
    if(direction === 'asc')
    {
      $(this).data('direction', 'desc');
    }
    else
    {
      $(this).data('direction', 'asc');
    }
    clientSort(column,direction);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<button class="sort_clients" data-column="name" data-direction="asc">Name</button>
<button class="sort_clients" data-column="age" data-direction="asc">Age</button>
<button class="sort_clients" data-column="room" data-direction="asc">Room</button>

<div class="list">
  <div class="client" data-name="john" data-age="50" data-room="1 Alpha">John, 50, 1 Alpha</div>
  <div class="client" data-name="susan" data-age="80" data-room="2 Beta">Susan, 84, 2 Beta</div>
  <div class="client" data-name="brad" data-age="70" data-room="3 Delta">Brad, 70, 3 Delta</div>
  <div class="client" data-name="margaret" data-age="45" data-room="Romeo 1">Margaret, 45, Romeo 1</div>
  <div class="client" data-name="steph" data-age="75" data-room="Romeo 3">Steph, 75, Romeo 3</div>
  <div class="client" data-name="matt" data-age="65" data-room="Romeo2">Matt, 65, Romeo2</div>
</div>

Answer 1

https://jsfiddle.net/r1hzc3ny/

  return $(a).data(column).localeCompare($(b).data(column));

您需要使用 localCompare 来比较两个字符串。

brad 也是一个错字。

Answer 2

给你，一个简单而优雅的完成方式。

var listitems = ['ABAA','BBBBB','AAA'];
listitems.sort(function(a, b) {
   var compA = a;
   var compB = b;
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})


console.log(JSON.stringify(listitems));

当然，您可以在排序函数中修改返回值。

function clientSort(column,direction)
{
  var $divs = $(".client");

  if (direction=='asc')
  {
    var alphaDivs = $divs.sort(function (a, b) {
       return ($(a).data(column) < $(b).data(column)) ? -1 : ($(a).data(column) > $(b).data(column)) ? 1 : 0;
    });
    $(".list").html(alphaDivs);
  }
  else
  {
    if (direction=='desc')
    {
      var alphaDivs = $divs.sort(function (b, a) { 
        return ($(a).data(column) < $(b).data(column)) ? -1 : ($(a).data(column) > $(b).data(column)) ? 1 : 0;
      });
      $(".list").html(alphaDivs);
    }
  }
}

$(document).ready(function()
{
  $('.sort_clients').click(function(e)
                           {
    var column = $(this).data('column');
    var direction = $(this).data('direction');
    
    console.log(column + ' ' + direction);
      
    if(direction === 'asc')
    {
      $(this).data('direction', 'desc');
    }
    else
    {
      $(this).data('direction', 'asc');
    }
    clientSort(column,direction);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<button class="sort_clients" data-column="name" data-direction="asc">Name</button>
<button class="sort_clients" data-column="age" data-direction="asc">Age</button>
<button class="sort_clients" data-column="room" data-direction="asc">Room</button>

<div class="list">
  <div class="client" data-name="john" data-age="50" data-room="1 Alpha">John, 50, 1 Alpha</div>
  <div class="client" data-name="susan" data-age="80" data-room="2 Beta">Susan, 84, 2 Beta</div>
  <div class="client" data-name="brad" data-age="70" data-room="3 Delta">Brad, 70, 3 Delta</div>
  <div class="client" data-name="margaret" data-age="45" data-room="Romeo 1">Margaret, 45, Romeo 1</div>
  <div class="client" data-name="steph" data-age="75" data-room="Romeo 3">Steph, 75, Romeo 3</div>
  <div class="client" data-name="matt" data-age="65" data-room="Romeo2">Matt, 65, Romeo2</div>
</div>

check this demo