Question

我试图根据col-md-x订购div。先是col-md-4，然后是col-md-8。我在这个变体中尝试了jQuery的sort函数：

＆＃13;

var divElement = $('.container').find('.row').sort(sortMe);

function sortMe(a, b) {
  return a.className > b.className;
}

$('.container').append(divElement);

＆＃13;

<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>

＆＃13;

然而，这不是在我的.col-md-x课程上排序，而是他在所有课程上排序（我认为）。我怎样才能对班级col-md-x进行具体排序？我还尝试了.pop()和.split()，但这与jQuery .sort()函数无法结合使用。

Answer 1

您可能希望编写一个函数，该函数将从col-md-

开始返回所需的类名

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您正在比较sort函数中的文本但需要比较整数。见下面的功能

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

Pure js变种：

＆＃13;

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]))

＆＃13;

<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>

＆＃13;

Answer 5

在Chrome上，我接受的答案不适用于我，请检查this old fiddle。但是我们可以增强答案：

HTML（无更改）

$ perror 11
OS error code  11:  Resource temporarily unavailable

JavaScript（小的更改）：

src_code.cpp, line 124

新的小提琴is here。

根据特定的类名对元素进行排序

5 个答案: