时间戳

首页 > 解决方案 > 根据值（姓名和姓氏）对 JavaScript 中的 2 个不同元素列表进行排序

javascript - 根据值（姓名和姓氏）对 JavaScript 中的 2 个不同元素列表进行排序

问题描述

我需要一些帮助。我有一个多维数组，其中包含一个长度为 2 ["name","surname"] 的子数组，它们都是第一个字母大写的字符串值。

请求是在窗口加载时显示数组的前 10 个元素。之后，我使用一个按钮，每次按下时加载 10 个以上的元素。此功能完美无缺。

我面临 2 个问题：-我有 2 个按钮，按姓名排序和按姓氏排序。你猜对了。如果按下“按名称排序”btn，则必须按名称对元素进行排序，如果按下“按姓氏排序”则相反。

以下功能运行良好。排序姓名和姓氏。问题是在对姓名进行排序时，姓氏应该跟随姓名到正确的位置。现在我可以对姓名和姓氏进行排序，结果是排序后有其他全名。

-第二个问题，如果我们修复第一个问题，如果我加载 10 个或更多元素（通过按“加载更多”btn），我将需要按 sort btn 对它们进行排序。我想我应该对初始数组进行排序，然后开始从排序列表中取出项目。但是如何使用 ["Name","Surname"] 的子数组对数组进行排序？先感谢您

function sortByName(e) {
  e.preventDefault();

  let itemList = document.getElementById('item-list-two').children;
  let names = [];
  const itemListArray = Array.from(itemList);

  for (let i = 0; i < itemListArray.length; i++) {
    names.push(itemListArray[i].innerText.toUpperCase());
    names.sort();
  }

  for (let i = 0; i < itemList.length; i++) {
    itemList[i].textContent = names[i].charAt(0) + names[i].slice(1).toLowerCase();
  }
}

function sortBySurname(e) {
  e.preventDefault();

  let itemList = document.getElementById('item-list-three').children;
  let surnames = [];
  const itemListArray = Array.from(itemList);
  for (let i = 0; i < itemListArray.length; i++) {
    surnames.push(itemListArray[i].innerText.toUpperCase());
    surnames.sort();
  }

  for (let i = 0; i < itemList.length; i++) {
    itemList[i].textContent = surnames[i].charAt(0) + surnames[i].slice(1).toLowerCase();
  }
}

标签： javascriptarrayssortinghtmlcollection

解决方案

这是一个简单的示例 - 正如您所看到的，当对姓名进行排序时，姓氏会跟随姓名到正确的位置。要对多维数组进行排序，例如["Name","Surname"]您只需要一个比较函数来检查位置 1 处元素的值并根据该值进行排序。例如

const names = [
  ["Alice", "Smith"],
  ["Bob", "Jones"],
  ["Eve", "Chatz"],
  ["Alice", "Fynn"],
  ["Alison", "Marks"]
];

const $ = (id) => document.getElementById(id);

function compareSurname(a, b) {
  if (a[1] < b[1]) {
    return -1;
  }

  if (a[1] > b[1]) {
    return 1;
  }

  return 0;
}


function log(m) {
  $("log").innerHTML = "";
  m.forEach(x => $("log").innerHTML += `${x}\n`)
}

$("name").addEventListener("click", () => log(names.sort()));
$("surname").addEventListener("click", () => log(names.sort(compareSurname)));
window.addEventListener('DOMContentLoaded', () => log(names));
<button type=button id=name>Name</button>
<button type=button id=surname>Surname</button>
<pre id=log></pre>

要在加载新数据的部分提供一些帮助，需要更多信息！

推荐阅读