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

标签 javascript html css

我正在尝试根据它们在 h4 中的标题按字母顺序对我的 divs 进行排序，方法是单击按钮。但是会发生以下情况:从所有 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>

最佳答案

您只需要定位正确的节点。你的目标是 <h1>节点 insertBefore .你只需要一些额外的 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>

关于javascript - 如何按字母顺序对 div 进行排序，同时保持 div 的形式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59590509/

上一篇：julia - 如何确定字典是否有某个键？

下一篇：ibm-mq - 使用 Java 一次性浏览来自 WebSphere MQ 的所有消息

相关文章：

javascript - 什么是 JavaScript 的内置字符串？

javascript - 如何更改子菜单侧出现在左侧而不是右侧

html - 如何获得悬停效果仅显示在链接上而不是容器的整个宽度

javascript - javascript切换淡入淡出效果

Javascript .toFixed() 更精确的舍入替代方案？

javascript - if (var.length >0){} 和 if (var){} 之间的区别

jquery - 无序列表的最后一个元素在页面底部被截断 [New Issue]

html - 如何在表格单元格周围创建粗体/"cursor"边框？

javascript - 如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形？

javascript - 如何确保点击时只有一个标签是彩色的？

©2024 IT工具网  联系我们