使用选定的类名对div进行排序

Question

可以按字母顺序使用类名对div进行排序（如here所述）。但是可以按所选顺序对div进行排序。例如：

我想按颜色顺序对div进行排序。 divs＆＃39;课程为red orange yellow和green。我希望红色首先出现，然后出现橙色等......

Here是我到目前为止所做的，感谢上面链接的帖子，但我无法进一步。有帮助吗？谢谢！

＆＃13;

＆＃13;

var elem = $('.ic').find('div').sort(sortMe);

function sortMe(a, b) {
  return a.className < b.className;
}
$('.ic').append(elem);

＆＃13;

.ic {
  width: 850px;
  position: relative;
  margin: 144px 0px 40px 116px;
  z-index: 1;
}

.ic:after {
  content: '';
  display: block;
  clear: both;
}

.icon {
  position: relative;
  float: left;
  width: 75px;
  height: 75px;
  margin: 5px;
  font-size: 0px;
}

.icon img {
  width: 75px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ic">



  <div class="icon green">

    <img src="http://img1.foroffice.ru/upload/iblock/381/oracal-641-63.jpg" />

  </div>




  <div class="icon orange">

    <img src="https://qph.ec.quoracdn.net/main-thumb-t-52446-200-hfaogtbebggwzikykcugzhqhvafgpkfs.jpeg" />

  </div>




  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>





  <div class="icon orange">

    <img src="https://qph.ec.quoracdn.net/main-thumb-t-52446-200-hfaogtbebggwzikykcugzhqhvafgpkfs.jpeg" />

  </div>






  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>





  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>






  <div class="icon green">

    <img src="http://img1.foroffice.ru/upload/iblock/381/oracal-641-63.jpg" />

  </div>





  <div class="icon red">

    <img src="http://www.symbols.com/gi.php?type=1&id=2201" />

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过为颜色指定数值来执行此操作：

var sortValues = {
  red: 0,
  orange: 1,
  yellow: 2,
  green: 3
};

给自己一个正则表达式，它将颜色类与元素上的其他元素隔离开来：

var rexValues = /(red|orange|yellow|green)/;

然后，使用正则表达式获取颜色类，在值数组上查找该值，并使用标准a - b数字模式对其进行排序：

function sortMe(a, b) {
  var aclass = a.className.match(rexValues);
  var avalue = aclass ? sortValues[aclass[0]] : 99;
  var bclass = b.className.match(rexValues);
  var bvalue = bclass ? sortValues[bclass[0]] : 99;
  return avalue - bvalue;
}

如果没有匹配，

match将返回null，如果存在，则返回包含颜色类作为第一个元素的数组。所以我们使用条件运算符（? :）检查是否存在匹配并查找排序值，否则我们使用99（显然选择你想要的任何数字）。

标准数字排序return avalue - bvalue的工作方式如下：如果avalue大于bvalue，则avalue - bvalue为正数; sort期望回调中的正数表示第一个元素在之后。如果avalue小于bvalue，则avalue - bvalue为负数，而sort期望回调中的负数表示第一个元素应之前 >第二个。如果它们相同，那么avalue - bvalue当然是0，这是sort期望元素为＃34;等于＆＃34; （可以按任何顺序）。

直播示例：

＆＃13;

＆＃13;

var sortValues = {
  red: 0,
  orange: 1,
  yellow: 2,
  green: 3
};
var rexValues = /(red|orange|yellow|green)/;
var elem = $('.ic').find('div').sort(sortMe);

function sortMe(a, b) {
  var aclass = a.className.match(rexValues);
  var avalue = aclass ? sortValues[aclass[0]] : 99;
  var bclass = b.className.match(rexValues);
  var bvalue = bclass ? sortValues[bclass[0]] : 99;
  return avalue - bvalue;
}
$('.ic').append(elem);

＆＃13;

.ic {
  width: 850px;
  position: relative;
  margin: 144px 0px 40px 116px;
  z-index: 1;
}

.ic:after {
  content: '';
  display: block;
  clear: both;
}

.icon {
  position: relative;
  float: left;
  width: 75px;
  height: 75px;
  margin: 5px;
  font-size: 0px;
}

.icon img {
  width: 75px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ic">



  <div class="icon green">

    <img src="http://img1.foroffice.ru/upload/iblock/381/oracal-641-63.jpg" />

  </div>




  <div class="icon orange">

    <img src="https://qph.ec.quoracdn.net/main-thumb-t-52446-200-hfaogtbebggwzikykcugzhqhvafgpkfs.jpeg" />

  </div>




  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>





  <div class="icon orange">

    <img src="https://qph.ec.quoracdn.net/main-thumb-t-52446-200-hfaogtbebggwzikykcugzhqhvafgpkfs.jpeg" />

  </div>






  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>





  <div class="icon yellow">

    <img src="http://www.colorcombos.com/images/colors/FFCC00.png" />

  </div>






  <div class="icon green">

    <img src="http://img1.foroffice.ru/upload/iblock/381/oracal-641-63.jpg" />

  </div>





  <div class="icon red">

    <img src="http://www.symbols.com/gi.php?type=1&id=2201" />

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;