使用香草JS根据索引移动元素

Question

我想根据索引移动元素（任务列表中的任务）。如果索引增加，则div下移；如果减小，则div向上移动。我知道函数insertBefore和insertAfter，但不幸的是，我不知道如何使用它们。

var task = [];
function newElement(newChild) {
    let btnDel= document.createElement("button");
    btnDel.className = "fa fa-trash-o";
    let myEd = document.getElementById("myEdit");
    let spanClose1 = document.getElementsByClassName("close1")[0];
    let spanRedact = document.getElementsByClassName("redact")[0];
    let myDel = document.getElementById("myDelete");
    let spanClose = document.getElementsByClassName("close")[0];
    let spanYes = document.getElementsByClassName("yes")[0];
    //create button
    let divWithBut = document.createElement("div");
    divWithBut.className = "forButt";
    let btnRedact = document.createElement("button");
    btnRedact.className = "fa fa-pencil";
    //redact but
    btnRedact.onclick = function(){
        myEd.style.display = "block";
        let editText = document.getElementById("editText");
        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
        editText.value = divWithText.innerHTML;
        editText.currentTarget;
        spanRedact.onclick = function(){
            divWithText.textContent = editText.value;
            divWithText.className = "todoPost";
            myEd.style.display = "none";
        };
        spanClose1.onclick = function() {
            myEd.style.display = "none";
        };
    }
    /*************************** */

    /*done but*/
    let doneBut = document.createElement("button");
    doneBut.className = "fa fa-check-circle-o";
    doneBut.onclick = function(){
        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
        divWithText.classList.toggle("checked");
    }

    /******************* */

    divWithBut.appendChild(btnRedact);
    divWithBut.appendChild(doneBut);
    divWithBut.appendChild(btnDel);
    /******************/

//for index
    let indexDiv = document.createElement("div");
    indexDiv.className = "indexDiv";
    let numbInd = 1;
    indexDiv.innerHTML = numbInd;
/*********************************** */
    //create arrow
    let divWithArrow = document.createElement("div");
    divWithArrow.className = "myArrow";
    let arrowUP = document.createElement("i");
    arrowUP.className = "fa fa-chevron-up";
    let arrowDown = document.createElement("i");
    arrowDown.className = "fa fa-chevron-down";
    divWithArrow.appendChild(arrowUP);
    divWithArrow.appendChild(arrowDown);

    //for date
    let date = new Date();
    let curr_date = date.getDate();
    let curr_month = date.getMonth()+1;//+1 бо почина з 0 і випада місяць на 1 менше
    let curr_year = date.getFullYear();
    let curr_hour = date.getHours();
    let curr_minutes = date.getMinutes();
    let d = (curr_date + "." + curr_month + "." + curr_year+"<br>"+curr_hour+":"+curr_minutes);
    let divTime = document.createElement("div");
    divTime.style.textAlign = "center";;
    divTime.innerHTML = d;
    //***************************/

    let div1 = document.createElement("div");
    div1.className = "timeComent";
    let myli = document.createElement("li");
    myli.className = "todoPost";
    let addField = document.getElementById("addField").value;
    task = document.createTextNode(addField);
    myli.appendChild(task);
    div1.appendChild(divTime);
    div1.appendChild(indexDiv);
    div1.appendChild(divWithArrow);
    div1.appendChild(myli);
    divWithBut.style.display = "flex";
    div1.appendChild(divWithBut);

    if (addField === '') {
        alert("You must write something!");
    } else {
        
        task = document.getElementById("forToDo").appendChild(div1)[0];
    }
    document.getElementById("addField").value = "";

    //delete but
    btnDel.onclick = function(){
        myDel.style.display = "block";
        spanClose.onclick = function() {
            myDel.style.display = "none";
        };
        spanYes.onclick = function() {
            myDel.style.display = "none";
            div1.remove();
        };
    }

    //move elements with arrow help
    arrowUP.onclick = function(){
        numbInd =numbInd+1;
        indexDiv.innerHTML = numbInd;
        //if I not mistake, insertAfter must be here...
    };
    arrowDown.onclick = function(){
        numbInd = numbInd-1;
        indexDiv.innerHTML = numbInd;
    };
}

*{
    margin: 0;
    padding: 0;
}
header{

    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
}
.firstBar{
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
}
.indexDiv{
    font-style: normal;
    text-align: center;
    color: #fff;
    width: 15px;
    height: 20px;
    margin: 10px;
    background-color: #888;
}
.fafaArrow{
    font-size: 24px;
    color: #000;
}
.timeComent{
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content:center;
    align-items: center;
}
.numberpost{
    padding: 5px;
    color: rgb(255, 255, 255);
    background: rgb(141, 112, 112);
}
.todoPost{
    background-color: #eee;
    width: 50%;
    margin: 5px;
    overflow: auto;
    text-align: justify;
}
.shadow {
    background: rgba(102, 102, 102, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.window {
    width: 300px;
    height: 50px;
    text-align: center;
    padding: 15px;
    border: 3px solid #0000cc;
    border-radius: 10px;
    color: #0000cc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #fff;
}
.shadow:target {display: block;}


.redact {
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.redact:hover {
    background-color: #68f462;
    color: white;}
.close{
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.close:hover{
    background-color: #f44336;
    color: white;
}
/* Style the close button */
.close3 {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.yes {
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.yes:hover{
    background-color: #68f462;
    color: white;
}

.close1{
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.close1:hover{
    background-color: #f44336;
    color: white;
}

/* When clicked on, add a background color and strike out text */
div li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
div li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

<!DOCTYPE html>
<html>
<head>
    <title>TO DO List</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
    <input id="addField" type="text" size="70%" placeholder="Task" name="Task">
    <button type="button" onclick="newElement()">Add</button>
</header>
<div>
    <div class="firstBar">
        <div class="fafaArrow">
            <i class="fa fa-caret-up" ></i>
            <i class="fa fa-caret-down"></i>
            <input class="inptxt" type="text" size="50%" name="Task">
            <i class="fa fa-filter"></i>
        </div>
    </div>

    <ul id="forToDo">
        <div class="timeComent">
            <div class="myTime"></div>
            <div class="myArrow"></div>
        </div>
    </ul>

</div>
<div id="myDelete" class="shadow">
    <div class="window">Delete item?<br>
        <span class="yes">Yes</span>
        <span class="close">No</span>
    </div>
</div>
<div id="myEdit" class="shadow">
    <div class="window">
        Edit text?<br>
        <label>
            <textarea id="editText"></textarea>
        </label>
        <span class="redact">Save</span>
        <span class="close1">Cancel</span>
    </div>
</div>
<script src="js/script2.js"></script>
</body>
</html>

Answer 1

我假设您希望具有较高索引的div向下。为此，您必须选择所有具有索引的div，获取最大索引，然后再次追加以将div向下推。像这样

let divs = document.querySelectorAll('.indexDiv'); // get all the index divs
let arr = []; // store the value of indexes in an array
for (var i = 0; i < divs.length; i++) { // for every .indexDiv
  arr.push(Number(divs[i].innerHTML)) // push the index of the div into the array
}
let maxindex = Math.max.apply(null, arr); // now get the maximum value from array
var found; // your element
for (var i = 0; i < divs.length; i++) { // for every div again.
  if (divs[i].textContent == maxindex) { // check the index and get that div with max index
    found = divs[i];
    break;
  }
}
if (divs.length > 1) { // check if the number of div's are more than 1.
  found.parentElement.remove() // remove them
  document.getElementById("forToDo").appendChild(found.parentElement) // then append them to go down
}

对最小值进行相同的操作。这次只是将div放在前面，并使值最小即可。

let divs = document.querySelectorAll('.indexDiv');
let arr = [];
for (var i = 0; i < divs.length; i++) {
  arr.push(Number(divs[i].innerHTML))
}
let minindex = Math.min.apply(null, arr);

var aTags = document.querySelectorAll('.indexDiv');
var found2;
for (var i = 0; i < aTags.length; i++) {
  if (aTags[i].textContent == minindex) {
    found2 = aTags[i];
    break;
  }
}
if (aTags.length > 1) {

  document.getElementById("forToDo").insertBefore(found2.parentElement, document.getElementById("forToDo").firstChild);

}

将所有这些内容组合在一起将产生以下结果，将所有这些代码推送到索引更改事件中。

var task = [];

function newElement(newChild) {
  let btnDel = document.createElement("button");
  btnDel.className = "fa fa-trash-o";
  let myEd = document.getElementById("myEdit");
  let spanClose1 = document.getElementsByClassName("close1")[0];
  let spanRedact = document.getElementsByClassName("redact")[0];
  let myDel = document.getElementById("myDelete");
  let spanClose = document.getElementsByClassName("close")[0];
  let spanYes = document.getElementsByClassName("yes")[0];
  //create button
  let divWithBut = document.createElement("div");
  divWithBut.className = "forButt";
  let btnRedact = document.createElement("button");
  btnRedact.className = "fa fa-pencil";
  //redact but
  btnRedact.onclick = function() {
    myEd.style.display = "block";
    let editText = document.getElementById("editText");
    let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
    editText.value = divWithText.innerHTML;
    editText.currentTarget;
    spanRedact.onclick = function() {
      divWithText.textContent = editText.value;
      divWithText.className = "todoPost";
      myEd.style.display = "none";
    };
    spanClose1.onclick = function() {
      myEd.style.display = "none";
    };
  }
  /*************************** */

  /*done but*/
  let doneBut = document.createElement("button");
  doneBut.className = "fa fa-check-circle-o";
  doneBut.onclick = function() {
    let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
    divWithText.classList.toggle("checked");
  }

  /******************* */

  divWithBut.appendChild(btnRedact);
  divWithBut.appendChild(doneBut);
  divWithBut.appendChild(btnDel);
  /******************/

  //for index
  let indexDiv = document.createElement("div");
  indexDiv.className = "indexDiv";
  let numbInd = 1;
  indexDiv.innerHTML = numbInd;
  /*********************************** */
  //create arrow
  let divWithArrow = document.createElement("div");
  divWithArrow.className = "myArrow";
  let arrowUP = document.createElement("i");
  arrowUP.className = "fa fa-chevron-up";
  let arrowDown = document.createElement("i");
  arrowDown.className = "fa fa-chevron-down";
  divWithArrow.appendChild(arrowUP);
  divWithArrow.appendChild(arrowDown);

  //for date
  let date = new Date();
  let curr_date = date.getDate();
  let curr_month = date.getMonth() + 1; //+1 бо почина з 0 і випада місяць на 1 менше
  let curr_year = date.getFullYear();
  let curr_hour = date.getHours();
  let curr_minutes = date.getMinutes();
  let d = (curr_date + "." + curr_month + "." + curr_year + "<br>" + curr_hour + ":" + curr_minutes);
  let divTime = document.createElement("div");
  divTime.style.textAlign = "center";;
  divTime.innerHTML = d;
  //***************************/

  let div1 = document.createElement("div");
  div1.className = "timeComent";
  let myli = document.createElement("li");
  myli.className = "todoPost";
  let addField = document.getElementById("addField").value;
  task = document.createTextNode(addField);
  myli.appendChild(task);
  div1.appendChild(divTime);
  div1.appendChild(indexDiv);
  div1.appendChild(divWithArrow);
  div1.appendChild(myli);
  divWithBut.style.display = "flex";
  div1.appendChild(divWithBut);

  if (addField === '') {
    alert("You must write something!");
  } else {

    task = document.getElementById("forToDo").appendChild(div1)[0];
  }
  document.getElementById("addField").value = "";

  //delete but
  btnDel.onclick = function() {
    myDel.style.display = "block";
    spanClose.onclick = function() {
      myDel.style.display = "none";
    };
    spanYes.onclick = function() {
      myDel.style.display = "none";
      div1.remove();
    };
  }

  //move elements with arrow help
  arrowUP.onclick = function() {
    numbInd = numbInd + 1;
    indexDiv.innerHTML = numbInd;
    let divs = document.querySelectorAll('.indexDiv');
    let arr = [];
    for (var i = 0; i < divs.length; i++) {
      arr.push(Number(divs[i].innerHTML))
    }
    let maxindex = Math.max.apply(null, arr);
    
 
    var aTags = document.querySelectorAll('.indexDiv');
    var found;
    for (var i = 0; i < aTags.length; i++) {
      if (aTags[i].textContent == maxindex) {
        found = aTags[i];
        break;
      }
    }
    if (aTags.length > 1) {
      document.getElementById("forToDo").appendChild(found.parentElement);
    

    }
  };
  arrowDown.onclick = function() {
    numbInd = numbInd - 1;
    indexDiv.innerHTML = numbInd;
    let divs = document.querySelectorAll('.indexDiv');
    let arr = [];
    for (var i = 0; i < divs.length; i++) {
      arr.push(Number(divs[i].innerHTML))
    }
    let minindex = Math.min.apply(null, arr);
    
    var aTags = document.querySelectorAll('.indexDiv');
    var found2;
    for (var i = 0; i < aTags.length; i++) {
      if (aTags[i].textContent == minindex) {
        found2 = aTags[i];
        break;
      }
    }
    if (aTags.length > 1) {

      document.getElementById("forToDo").insertBefore(found2.parentElement, document.getElementById("forToDo").firstChild);

    }
  };
}

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: auto;
}

.firstBar {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: auto;
}

.indexDiv {
  font-style: normal;
  text-align: center;
  color: #fff;
  width: 15px;
  height: 20px;
  margin: 10px;
  background-color: #888;
}

.fafaArrow {
  font-size: 24px;
  color: #000;
}

.timeComent {
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.numberpost {
  padding: 5px;
  color: rgb(255, 255, 255);
  background: rgb(141, 112, 112);
}

.todoPost {
  background-color: #eee;
  width: 50%;
  margin: 5px;
  overflow: auto;
  text-align: justify;
}

.shadow {
  background: rgba(102, 102, 102, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.window {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #fff;
}

.shadow:target {
  display: block;
}

.redact {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor: pointer;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.redact:hover {
  background-color: #68f462;
  color: white;
}

.close {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor: pointer;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}


/* Style the close button */

.close3 {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.yes {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor: pointer;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.yes:hover {
  background-color: #68f462;
  color: white;
}

.close1 {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor: pointer;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close1:hover {
  background-color: #f44336;
  color: white;
}


/* When clicked on, add a background color and strike out text */

div li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}


/* Add a "checked" mark when clicked on */

div li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

<!DOCTYPE html>
<html>

<head>
  <title>TO DO List</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <input id="addField" type="text" size="70%" placeholder="Task" name="Task">
    <button type="button" onclick="newElement()">Add</button>
  </header>
  <div>
    <div class="firstBar">
      <div class="fafaArrow">
        <i class="fa fa-caret-up"></i>
        <i class="fa fa-caret-down"></i>
        <input class="inptxt" type="text" size="50%" name="Task">
        <i class="fa fa-filter"></i>
      </div>
    </div>

    <ul id="forToDo">
      <div class="timeComent">
        <div class="myTime"></div>
        <div class="myArrow"></div>
      </div>
    </ul>

  </div>
  <div id="myDelete" class="shadow">
    <div class="window">Delete item?<br>
      <span class="yes">Yes</span>
      <span class="close">No</span>
    </div>
  </div>
  <div id="myEdit" class="shadow">
    <div class="window">
      Edit text?<br>
      <label>
            <textarea id="editText"></textarea>
        </label>
      <span class="redact">Save</span>
      <span class="close1">Cancel</span>
    </div>
  </div>
  <script src="js/script2.js"></script>
</body>

</html>