如何在保持 div 形式的同时按字母顺序对 div 进行排序？

Question

我正在尝试通过单击按钮根据它们的标题按字母顺序对我的div进行排序h4。但是发生的情况如下：从所有div 收集的所有h4标题都被压缩(尽管按字母顺序(在第一个div 中，使所有其他div 没有标题且未排序。我从w3schools获得了脚本，其他脚本来自不相关的部分，但是仍然(以某种方式(需要 - 我对javascript还不太了解。因此，关于如何根据div 在h4中的标题进行排序，同时保持它们的完整的任何想法？

function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("id01");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("h4");
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
// start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should
switch place with the current item: */
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically
lower than current item, mark as a switch
and break the loop: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}

filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);     
}
}
element.className = arr1.join(" ");
}

body {
margin: 0;
}
* {box-sizing: border-box;}
.row {margin: 0px 0px 0 20.3vmin;}
/* Add padding BETWEEN each column */
.row, .row > .column {padding:0 1vmin 1vmin 1vmin;}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
.theimg{position:relative;display:block;height:24vmin;}	
.theimg img{position:relative;display:inline-block;height:100%;width:80%;} 
/* Clear floats after rows */ 
.row:after {
content: "";
display: table;
clear: both;
}
/* Contentt */
.contentt {
background-color: white;
padding: 1.2vmin;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
max-width:200px;
height:43vmin;
position:relative;
overflow:hidden; 
}
h4{margin:0;}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}

<button onclick="sortList()">Sort</button>
<div class="row" id="id01">

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
</div>
</div>    

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
</div>
</div> 

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
</div>
</div> 

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
</div>
</div> 

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
</div>
</div> 

<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Orde van de Feniks"></div>
<h4>Harry Potter en de Orde van de Feniks</h4>
</div>
</div> 

</div>

Answer 1

您只需要定位正确的节点。您正在使用insertBefore来定位<h1>节点。 你只需要几个额外的parentNode在那里。

我改变的只是：
b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);

function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("id01");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("h4");
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
// start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should
switch place with the current item: */
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically
lower than current item, mark as a switch
and break the loop: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
switching = true;
}
}
}
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}

body {
margin: 0;
}
* {
box-sizing: border-box;
}
.row {
margin: 0px 0px 0 20.3vmin;
}
/* Add padding BETWEEN each column */
.row,
.row>.column {
padding: 0 1vmin 1vmin 1vmin;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none;
/* Hide all elements by default */
}
.theimg {
position: relative;
display: block;
height: 24vmin;
}
.theimg img {
position: relative;
display: inline-block;
height: 100%;
width: 80%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Contentt */
.contentt {
background-color: white;
padding: 1.2vmin;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 200px;
height: 43vmin;
position: relative;
overflow: hidden;
}
h4 {
margin: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}

<button onclick="sortList()">Sort</button>
<div class="row" id="id01">
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Orde van de Feniks"></div>
<h4>Harry Potter en de Orde van de Feniks</h4>
</div>
</div>
</div>

Answer 2

您不必自己进行排序。如果您获得.column并将它们转换为实际数组(带有Array.from()或[].slice.apply()(，您可以使用Array.prototype.sort().

Node.prototype.insertBefore()是一个选项，但您也可以先对所有节点进行排序，然后使用.appendChild()将它们"追加"到容器中。有了这个，你不需要任何像.insertBefore()那样的参考节点

示例(我删除了与排序没有直接关系的所有内容(：

function sortList() {
var container = document.querySelector("#id01"),
columns = container.querySelectorAll(".column");

if (columns.length) {
columns = Array.from(columns); // or [].slice.apply(columns) if Array.from() is not available

columns.sort(function(leftColumn, rightColumn) {
var leftTitle = leftColumn.querySelector("h4").textContent;
var rightTitle = rightColumn.querySelector("h4").textContent;

return leftTitle.localeCompare(rightTitle);
});

columns.forEach(function(column) {
container.appendChild(column);
});
}
}

.row { margin: 0px 0px 0 20.3vmin; }
.row, .row>.column { padding: 0 1vmin 1vmin 1vmin; }
.column { float: left; width: 33.33%; }
.theimg img { display: none }

<button onclick="sortList()">Sort</button>
<div class="row" id="id01">
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
</div>
</div>
<div class="column">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Orde van de Feniks"></div>
<h4>Harry Potter en de Orde van de Feniks</h4>
</div>
</div>
</div>

Answer 3

以下是这个问题的解决方案。这是一个完整的重写，注释详细说明了每个步骤。

在这个例子中，我使用了以下函数 en 方法

• 查询选择器和查询选择器全部
• Array.from
• Array.prototype.sort
• Array.prototype.forEach

function sortList() {
//lets redo this properly and make a lesson about it:

//we want to sort based upon the table:
//first we use element.querySelectorAll to get all elements with h4.
//querySelectorAll allows us to select elements the same way we select elements in CSS. When found it return as nodelist containing the elements over which we can iterate.

//use es6 constant | it defines a variable and locks it 
const row = document.querySelector("div.row#id01"); //select the row: div.classname#id

//select all h4-elements with querySelectorAll:
const h4Elements = row.querySelectorAll("div.contentt > h4"); //use div.contentt as reference and select the childs (>) h4

//iterate over all the h4 elements
//this is the main sorting loop!
//convert the nodelist to an array and sort them
const sorted = Array.from(h4Elements).sort( function(a, b) 
{
//textContent references the text
if(a.textContent < b.textContent) { return -1; }
if(a.textContent > b.textContent) { return 1; }
return 0;
});

sorted.forEach( function(element){
//loop over the sorted array
//append the parent div again to the row
//use element.closest to find the parent div container
row.appendChild(element.closest("div.column"));
});
}

* {box-sizing: border-box;}
.row {margin: 0px 0px 0 20.3vmin;}
.row, .row > .column {padding:0 1vmin 1vmin 1vmin;}
.column {
float: left;
width: 33.33%;
display: inline-block;
}
.theimg{position:relative;display:block;height:24vmin;}	
.theimg img{position:relative;display:inline-block;height:100%;width:80%;} 
/* Contentt */
.contentt {
background-color: white;
padding: 1.2vmin;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
max-width:200px;
height:43vmin;
position:relative;
overflow:hidden; 
}
h4{margin:0;}

<button onclick="sortList()">Sort</button>
<div class="row" id="id01">

<div class="column Oliver Twist Charles Dickens Engels">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
</div>
</div>    

<div class="column Harry Potter en de Steen der Wijzen J. K. Rowling Nederlands fantasie">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
</div>
</div> 

<div class="column Harry Potter en de Geheime Kamer J. K. Rowling Nederlands fantasie">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
</div>
</div> 

<div class="column J. K. Rowling Harry Potter fantasie Nederlands">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
</div>
</div> 

<div class="column Harry Potter en de Vuurbeker J. K. Rowling Nederlands fantasie">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
</div>
</div> 

<div class="column Harry Potter en de Orde van de Feniks J. K. Rowling Nederlands fantasie">
<div class="contentt">
<div class=theimg><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Harry Potter en de Orde van de Feniks"></div>
<h4>Harry Potter en de Orde van de Feniks</h4>
</div>
</div> 

</div>