javascript - 按内容对 div 进行排序

Question

我有一个问题。

.titel
{
	display: inline-block;
	padding:5px 0 ;
}

#sort div div
{
	display: inline-block;
	padding:5px 0 ;
}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<div>
			<div class="titel achternaam" >Achternaam</div>
			<div class="titel voornaam" >Voornaam</div>
			<div class="titel kantoor" >Kantoor</div>		
		</div>



		<div class="spann">
			<span class="ui-icon ui-icon-circle-triangle-n"></span>
			<span class="ui-icon ui-icon-circle-triangle-s"></span>
			<span class="ui-icon ui-icon-circle-triangle-n"></span>
			<span class="ui-icon ui-icon-circle-triangle-s"></span>
			<span class="ui-icon ui-icon-circle-triangle-n"></span>
			<span class="ui-icon ui-icon-circle-triangle-s"></span>
		</div>


		<div id="sort">			
			<div  class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage">
          <div class="achternaam">bill</div>
          <div class="voornaam">gates</div>
          <div class="kantoor">123</div>
          </div>
          
          <div  class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage">
          <div class="achternaam">jhonny</div>
          <div class="voornaam">depp</div>
          <div class="kantoor">43321</div>
			 </div>
       
       

div 中带有 id 排序的数据来自数据库(这就是我这样显示的原因)

我想做的是:

如果我点击第一个图标，它会显示按 voornaam(asc) 排序的列表如果我点击第二个图标，它会显示按 voornaam(desc) 排序的列表如果我点击第三个图标，它会显示按 achternaam (asc) 排序的列表等等

我已经尝试了我在 stackoverflow 和谷歌上找到的所有东西，但都没有用。

谁能给我一个好的建议。

我想要的是这样的东西

http://jsfiddle.net/7sgw21hn/1/

但它必须读取内容

我尝试过的事情

jQuery - Sorting div contents

https://www.sitepoint.com/community/t/sort-div-order-alphabetically-based-on-contents/39955/2

还有很多(现在找不到)

这是在我点击之前

这是之后

我们能做点什么吗

Answer 1

这是演示:http://output.jsbin.com/gojopuh

如前所述，前两个按钮按名字升序和降序排序。后两个按钮按姓氏升序和降序排序。

我的代码使用冒泡排序并利用 replaceChild 获得性能优势。

还有下面的代码，现在可以轻松地为这些数据添加更多控件。

代码如下，有问题尽管问。

var controls = document.querySelectorAll('.spann > span');
var dataContainer = document.querySelector('#sort');
var data = document.querySelectorAll('#sort > div');

// select controls
var ascAchternaam = controls[0];
var descAchternaam = controls[1];
var ascVoornaam = controls[2];
var descVoornaam = controls[3];
var ascKantoor = controls[4];
var descKantoor = controls[5];
var ascVerjaardag = controls[6];
var descVerjaardag = controls[7];

// define a user type
function User(achternaam, voornaam, kantoor, verjaardag, elem) {
  this.achternaam = achternaam;
  this.voornaam = voornaam;
  this.kantoor = kantoor;
  this.verjaardag = verjaardag;
  this.elem = elem;
}

function bubbleSort(order, data, prop) {
  // copy data array
  var sortingArr = Array.prototype.slice.call(data);
  for (var i = sortingArr.length - 1; i >= 0; i--) {
    for (var j = 1; j <= i; j++) {
      var birthdayA = sortingArr[j-1][prop].split('-');
      var birthdayB = sortingArr[j][prop].split('-');

      if (order == 'asc') {
        if (birthdayA.length > 1) {
          if (parseFloat(birthdayA[1], 10) > parseFloat(birthdayB[1], 10) || parseFloat(birthdayA[0], 10) > parseFloat(birthdayB[0], 10)) {
            var temp = sortingArr[j-1]; 
            sortingArr[j-1] = sortingArr[j]; 
            sortingArr[j] = temp;    
          }   
        } else { 
          if (sortingArr[j-1][prop] > sortingArr[j][prop]) {
          var temp = sortingArr[j-1]; 
          sortingArr[j-1] = sortingArr[j]; 
          sortingArr[j] = temp;    
          }     
        }
      } else {
        if (birthdayA.length > 1) {
          if (parseFloat(birthdayA[1], 10) < parseFloat(birthdayB[1], 10) || parseFloat(birthdayA[0], 10) < parseFloat(birthdayB[0], 10)) {
            var temp = sortingArr[j-1]; 
            sortingArr[j-1] = sortingArr[j]; 
            sortingArr[j] = temp;    
          }   
        } else { 
          if (sortingArr[j-1][prop] < sortingArr[j][prop]) {
          var temp = sortingArr[j-1]; 
          sortingArr[j-1] = sortingArr[j]; 
          sortingArr[j] = temp;    
          }     
        }  
      }
    }
  }

  return sortingArr;
}

// event action
function sortOnClick(order, data, prop) {
  var sorted = bubbleSort(order, data, prop);

  for (var i = 0; i < sorted.length; i++) {
    var user = sorted[i]; 
    var wrapper = user.elem.cloneNode(true);
    dataContainer.replaceChild(wrapper, dataContainer.children[i]);
  }

  return sorted; 
}

// used to make the data into a format we need
function formatUsers(data) {
  var userData = [];

  for (var i = 0; i < data.length; i++) {
    var userElem = data[i];
    var fname = userElem.querySelector('.achternaam').textContent;
    var lname = userElem.querySelector('.voornaam').textContent;
    var office = userElem.querySelector('.kantoor').textContent;
    var birthday = userElem.querySelector('.verjaardag').textContent;
    userData.push(new User(fname, lname, office, birthday, userElem));
  }

  return userData;
}

// sorter
function initSorter(data) {
  // reshape our data
  var userData = formatUsers(data);
  // add event listeners to controls
  ascAchternaam.addEventListener('click', function() {
    sortOnClick('asc', userData, 'achternaam');
  });
  descAchternaam.addEventListener('click', function() {
    sortOnClick('desc', userData, 'achternaam');
  });
  ascVoornaam.addEventListener('click', function() {
    sortOnClick('asc', userData, 'voornaam');
  });
  descVoornaam.addEventListener('click', function() {
    sortOnClick('desc', userData, 'voornaam');
  });
  ascKantoor.addEventListener('click', function() {
    sortOnClick('asc', userData, 'kantoor');
  });
  descKantoor.addEventListener('click', function() {
    sortOnClick('desc', userData, 'kantoor');
  });
  ascVerjaardag.addEventListener('click', function() {
    sortOnClick('asc', userData, 'verjaardag');
  });
  descVerjaardag.addEventListener('click', function() {
    sortOnClick('desc', userData, 'verjaardag');
  });
}

// init our sorter
initSorter(data);