JS 从其子项的内部 HTML 值对数组进行排序？

问题描述 投票：0回答：1

有没有一种方法可以根据 html 元素的 innerText 的值对 JS 数组进行排序？ 我正在创建一个 div 元素 (class="inbox" id="inbox${var}")，并将数字作为其 innerText，然后将所有 div 推入一个数组 (numArr)。我想根据它们的内部数值将这些 div 排序为降序。

JavaScript

const addBtn = document.getElementById("add-btn")
console.log(addBtn);

const addIpt = document.getElementById("add-ipt")
console.log(addIpt);

const box = document.getElementById("box")
console.log(box);

const sortBtn = document.getElementById("sort-btn")
console.log(sortBtn);

let numArr = [];
let numInc = 0;

addBtn.addEventListener("click", () => {
  console.log(addIpt.value)
  let boxNum = addIpt.value;
  console.log(boxNum);
  console.log(box);
  box.innerHTML += `<div class="inbox" id="inbox${numInc}">${boxNum}</div>`
  boxNum = 0;
  
  empty();
  addToArr();
  numInc++;
  console.log(numInc);

});

function addToArr() {
  numArr.push(box.children);
  console.log(numArr);
};

function empty() {
  document.getElementById("add-ipt").value = "";
};

//New Function Below

function parseAndOrder() {
  numArr.sort(parseInt(el1.innerText), parseInt(el2.innerText))
  return (parseInt(el2.innerText) - parseInt(el1.innerText))
}

//New Sort Button
sortBtn.addEventListener("click", () => {
  parseAndOrder();
})

新的 HTML

<!DOCTYPE>
<HTML>
    <head>
        <title>Stackoverflow Questions</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, iniatal-scale=1.0">
        <link rel="stylesheet" href="stackoverflow.css">
    </head>
    <body>
        <input id="add-ipt" type="number">
        <button id="add-btn">Add</button>
        <button id="sort-btn">Sort</button>
        <div id="box"></div>
    </body>
    <script src="stackoverflow.js"></script>

</HTML>
javascript html arrays dom scope
1个回答
0
投票

您可以在用户添加时继续将输入数字推送到数组中。然后对数组进行排序并使用它填充 html。

还没有测试过这个，但是像这样的东西应该可以工作

const addBtn = document.getElementById("add-btn");
const addIpt = document.getElementById("add-ipt");
const box = document.getElementById("box");

let numArr = [];

addBtn.addEventListener("click", () => {
  numArr.push(addIpt.value);

  // sort array
  numArr.sort(function(a, b){return b - a});

  empty();
  printElements();
});

function empty() {
  addIpt.value = "";
};

function printElements() {
  let content = '';
  numArr.forEach((num, index) => {
    content += `<div class="inbox" id="inbox${index}">${num}</div>`;
  });
  box.innerHTML = content;
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.