主页 / 问题 / 1265368
Accepted
Alex
Asked:2022-04-03 02:06:10 +0000 UTC2022-04-03 02:06:10 +0000 UTC

如何反向排序项目？[关闭]

  • 772

以下结构中有大量项目：

  • 笔记本
    -- 宏碁
    -- 三星
    -- 联想

  • 平板电脑
    -- 宏碁
    -- 三星
    -- 联想

  • 电视
    -- 宏碁
    -- 三星
    -- 联想

如何使用 JS 在类别输出模块中显示类别，以便视图如下所示：

  • 三星：
    -- 电视
    -- 笔记本电脑
    -- 平板电脑
  • 宏碁
    --电视--笔记本 --
    平板
    电脑
  • 联想
    -- 电视
    -- 笔记本电脑 --
    平板电脑

<ul>
  <li class="heading"><a>Ноутбуки</a></li>
  <li>      
     <ul>
       <li><a>Acer</a></li>
       <li><a>Samsung</a></li>
       <li><a>Lenovo</a></li>
     </ul>
  </li>
</ul>

<ul>
  <li class="heading"><a>Ноутбуки</a></li>
  <li>      
     <ul>
       <li><a>Acer</a></li>
       <li><a>Samsung</a></li>
       <li><a>Lenovo</a></li>
     </ul>
   </li>
</ul>

<ul>
  <li class="heading"><a>Планшеты</a></li>
  <li>      
     <ul>
       <li><a>Acer</a></li>
       <li><a>Samsung</a></li>
       <li><a>Lenovo</a></li>
     </ul>
  </li>
</ul>

javascript

1 个回答

  1. Best Answer

    作为一种选择，通过原始列表，形成Map. 作为键，使用公司的名称，作为值，使用公司生产的一系列设备。

    然后迭代Map，形成结果列表。使用键Map（公司名称）作为列表的元素，并Map从值（设备类型的数组）中形成嵌套列表。

    let heading = document.querySelectorAll(".heading");
let map = new Map();
for (let i = 0; i < heading.length; ++i) {
    let a = heading[i].querySelectorAll("a");
    let groupName = a[0].textContent.trim();
    for (let j = 1; j < a.length; ++j) {
        let companyName = a[j].textContent.trim();
        let companyGroups = map.get(companyName);
        if (companyGroups)
            companyGroups.push(groupName);
        else
            map.set(companyName, [groupName]);
    }
}

let compare = (new Intl.Collator("ru")).compare;
let ul = document.createElement("ul");
ul.className = "some-style";
let companies = Array.from(map.keys()).sort(compare);
for (let companyName of companies) {
    let li = document.createElement("li");
    let a = document.createElement("a");
    a.textContent = companyName;
    li.append(a);
    
    let li_ul = document.createElement("ul");
    let companyGroups = map.get(companyName).sort(compare);
    for (let groupName of companyGroups) {
        let li = document.createElement("li");
        let a = document.createElement("a");
        a.textContent = groupName;
        li.append(a);
        li_ul.append(li);
    }
    li.append(li_ul);
    
    ul.append(li);
}

document.body.append(ul);
    .some-style {
    background-color: silver;
    border: 1px solid black;
}
    <ul>
  <li class="heading"><a>Телевизоры</a>   
     <ul>
       <li><a>Samsung</a></li>
       <li><a>Lenovo</a></li>
     </ul>
  </li>
  <li class="heading"><a>Планшеты</a>   
     <ul>
       <li><a>Lenovo</a></li>
       <li><a>Samsung</a></li>
       <li><a>Acer</a></li>
     </ul>
   </li>
  <li class="heading"><a>Ноутбуки</a>     
     <ul>
       <li><a>Lenovo</a></li>
       <li><a>Samsung</a></li>
       <li><a>Acer</a></li>
     </ul>
  </li>
</ul>

    • 2

相关问题