如何按字母順序對 div 進行排序，同時保留 div 的形式？

Question

我正在嘗試根據h4的標題按字母順序對我的div 進行排序，方法是單擊按鈕。 但是會發生以下情況：從所有 div 中收集的所有h4標題都被壓縮（盡管按字母順序）在第一個 div 中，讓所有其他 div 沒有標題且未排序。 我從w3schools獲得了腳本，其他腳本來自不相關的部分，但是仍然（不知何故）需要 - 我對 javascript 還不太了解。 因此，關於如何根據h4的標題對 div 進行排序，同時保持它們完整的任何想法？

 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

下面是這個問題的解決方案。 這是一個完全重寫的注釋，詳細說明了每一步。

在這個例子中，我使用了以下函數和方法

• querySelector和querySelectorAll
• 數組.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 JK 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 JK 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 JK 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 JK 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 JK 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>