时间戳

首页 > 解决方案 > 更换

  • 具有数组结果的元素

    • javascript - 更换
  • 具有数组结果的元素

    • 问题描述

    我有以下标记：

    <ul class="category-top-navigation__group category-top-navigation__group--level-2 " data-category="jj-brands">
  <li data-group="accessories">Scarf</li>
  <li data-group="bottoms">Shorts</li>
  <li data-group="tops">Polo</li>
  <li data-group="tops">T-shirt</li>
  <li data-group="bottoms">Jeans</li>
  <li data-group="accessories">Sunglasses</li>
</ul>

    我制作了一些 JavaScript 逻辑，用于获取所有<li>元素并将它们排序到一个二维数组中，该数组依赖于data-group.

    这意味着排序将包含以下列表：

    "<li data-group='accessories'>Scarf</li>"
"<li data-group='accessories'>Sunglasses</li>"
"<li data-group='bottoms'>Shorts</li>"
"<li data-group='bottoms'>Jeans</li>"
"<li data-group='tops'>Polo</li>"
"<li data-group='tops'>T-shirt</li>"

    现在我想做的是用新的排序列表替换<li>里面已经存在的元素。<ul>这就是我卡住的地方。

    CodePen 示例在这里

    标签： javascripthtml

    解决方案

    使用从 -elements 创建的连接替换uls ，该连接使用属性对其元素进行排序，映射到元素中的字符串。innerHTMLArraylidata-groupouterHTML

    const ul = document.querySelector("ul");
ul.innerHTML = Array.from(ul.querySelectorAll("li"))
  .sort( (a, b) => a.dataset.group.localeCompare(b.dataset.group) )
  .map(v => v.outerHTML)
  .join("");
    <ul class="category-top-navigation__group category-top-navigation__group--level-2 " data-category="jj-brands">
  <li data-group="accessories">Scarf</li>
  <li data-group="bottoms">Shorts</li>
  <li data-group="tops">Polo</li>
  <li data-group="tops">T-shirt</li>
  <li data-group="bottoms">Jeans</li>
  <li data-group="accessories">Sunglasses</li>
</ul>

    推荐阅读