根据具体的类名排序元素

Question

我想订购基础上，col-md-x股利。首先col-md-4然后col-md-8。我试过的jQuery的排序功能，在这个变体：

var divElement = $('.container').find('.row').sort(sortMe);

function sortMe(a, b) {
  return a.className > b.className;
}

$('.container').append(divElement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row different col-md-8 left">col-md-8</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 left">col-md-4</div>
<div class="row different col-md-8 left">col-md-8</div>

然而，这并不是排序我.col-md-x类，但经他整理所有类（我认为）。我怎么能在类col-md-x排序的具体？我试着也.pop()和.split()，但这不是在jQuery的.sort()功能组合工作。

Answer 1

var divElement = $('.container').find('.row').sort(sortMe);

function sortMe(a, b) {
 
   return a.className.match(/col-md-(\d)/)[1] - b.className.match(/col-md-(\d)/)[1];
}

$('.container').append(divElement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dic class="container">
<div class="row different col-md-8 left">1</div>
<div class="row different col-md-4 right">2</div>
<div class="row different col-md-4 right">3</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">5</div>
</div>

Answer 2

您可能需要编写会被它开始col-md-返回所需的类名称的函数

$(function() {
  var divElement = $('.container').find('.row').sort(sortMe);

  function sortMe(a, b) {
     return getColMdClassName(a) > getColMdClassName(b);
  }

  $('.container').append(divElement);
});

function getColMdClassName(obj) {
    return $.grep(obj.className.split(" "), function(v, i){
       return v.indexOf('col-md-') === 0;
   }).join();
}

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


<div class='container'>
  <div class="row different col-md-8 left">8</div>
  <div class="row different col-md-4 right">4</div>
  <div class="row different col-md-4 right">4</div>
  <div class="row different col-md-4 left">4</div>
  <div class="row different col-md-8 left">8</div>
</div>

Answer 3

您比较的排序功能，文本，但需要比较整数。见下文功能

$(function(){
var divElement = $('.container').find('.row').sort(sortMe);

$('.container').append(divElement);
});

function sortMe(a, b) {
  var aInt = getInteger(a.className);
  var bInt = getInteger(b.className);
  return aInt > bInt;
}

function getInteger(classNameList)
{
var int = 0;
var classList = classNameList.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i].indexOf('col-md')!=-1) {
    int = parseInt(classList[i].replace('col-md-',''));
}
}
return int;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="container">
<div class="row different col-md-8 left">8</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">8</div>
</div>

Answer 4

纯JS变种：

var divs = document.getElementById('divs');

var map = arr => fn => Array.prototype.map.call(arr, fn);

var getN = str => str.substr(str.indexOf('col-md-'), 8).substr(-1);

var res = map(divs.children)(x => x).sort((a, b) => getN(a.className) - getN(b.className));

res.forEach((el, i) => divs.replaceChild(el, divs.childNodes[i]))

<div id="divs">
  <div class="row different col-md-8 left">col-md-8</div>
  <div class="row different col-md-4 right">col-md-4</div>
  <div class="row different col-md-4 right">col-md-4</div>
  <div class="row different col-md-4 left">col-md-4</div>
  <div class="row different col-md-8 left">col-md-8</div>
</div>

Answer 5

接受的答案是不是为我工作在Chrome，请检查this old fiddle。但是，我们可以加强了答案：

HTML（无变化）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dic class="container">
    <div class="row different col-md-8 left">1</div>
    <div class="row different col-md-4 right">2</div>
    <div class="row different col-md-4 right">3</div>
    <div class="row different col-md-4 left">4</div>
    <div class="row different col-md-8 left">5</div>
</div>

JavaScript的（小的变化）：

var divElement = $('.container').find('.row').sort(sortMe);

function sortMe(a, b) { 
   return a.className.match(/col-md-(\d)/)[1] - b.className.match(/col-md-(\d)/)[1];
}

$('.container').append(divElement);

新小提琴is here。