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>

来自具有id排序的div的数据来自数据库（这就是我之所以这样显示的原因）

我要做的是：

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

我已经尝试过在stackoverflow和google上找到的所有东西，但没有一个有效。

有人可以给我一个很好的建议。

我的意思是这样的

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

我们试试吧。

您必须编辑HTML结构，以便名字，姓氏和办公室的每个“记录”都有一个单独的容器。如果你还要计算构成一条记录的div的数量，代码会变得更大。

我选择了一个列表作为包装器，因为它或多或少是标准方式。还为每个图标添加了一个数据排序属性，因此我不必经历从标题中读取排序类型的麻烦。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .wrap-3, .wrap-6 {
        border: 1px solid black;
        width: 50%;
    }
    .wrap-3 > * {
        display: inline-block;
        width: 32%;
    }
    .wrap-6 > * {
        display: inline-block;
        width: 16%;
    }
    ul {
        border: 1px solid black;
        list-style: none;
        width: 50%;
    }
    li {
        display: block;
        width: 100%;
    }
    li > * {
        display: inline-block;
        width: 32%;
    }
    </style>
</head>
<body>
    <div class="wrap-3">
        <span class="titel achternaam" >Achternaam</span>
        <span class="titel voornaam" >Voornaam</span>
        <span class="titel kantoor" >Kantoor</span>     
    </div>
    <div id="icons-sort" class="wrap-6">
        <span class="ui-icon ui-icon-circle-triangle-n" data-sort="achternaam-asc">up</span>
        <span class="ui-icon ui-icon-circle-triangle-s" data-sort="achternaam-desc">down</span>
        <span class="ui-icon ui-icon-circle-triangle-n" data-sort="voornaam-asc">up</span>
        <span class="ui-icon ui-icon-circle-triangle-s" data-sort="voornaam-desc">down</span>
        <span class="ui-icon ui-icon-circle-triangle-n" data-sort="kantoor-asc">up</span>
        <span class="ui-icon ui-icon-circle-triangle-s" data-sort="kantoor-desc">down</span>
    </div>
    <ul>
        <li>
            <span class="achternaam">Gates</span>
            <span class="voornaam">Bill</span>
            <span class="kantoor">123</span>
        </li>
        <li>
            <span class="achternaam">Zuckerberg</span>
            <span class="voornaam">Mark</span>
            <span class="kantoor">456</span>
        </li>
        <li>
            <span class="achternaam">Resig</span>
            <span class="voornaam">John</span>
            <span class="kantoor">789</span>
        </li>       
    </ul>
<script>
var clear = function clear( node ) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
    return node;
};
document.querySelector('#icons-sort').addEventListener('click', function( event ) {
    var list, records, fragment, sortType, field, order;
    if (event.target && event.target.hasAttribute('data-sort')) {
        list = document.querySelector('ul'),
        records = Array.prototype.slice.call(list.querySelectorAll('li')),
        fragment = document.createDocumentFragment(),
        sortType = event.target.getAttribute('data-sort').split('-'),
        field = '.' + sortType[0],
        order = sortType[1];
        records = records.sort(function( first, second ) {
            var firstVal = first.querySelector(field).innerHTML,
                secondVal = second.querySelector(field).innerHTML;
            if (firstVal < secondVal) return -1;
            else if (firstVal > secondVal) return 1;
        });
        if (order === 'desc') records.reverse();
        records.forEach(function( listItem ) {
            fragment.appendChild(listItem);
        });
        clear(list).appendChild(fragment);
    }
});
</script>
</body>
</html>

Answer 2

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

如上所述，前两个按钮在名字上排序asc和desc。后两个按钮按姓氏排序asc和desc。

我的代码使用冒泡排序，并利用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);

按内容

2 个答案: