Question

我有以下标记：

<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 Example Here

Answer 1

使用从ul元素创建的联接innerHTML替换Array li，该元素使用data-group属性在其元素上排序，并映射到元素outerHTML中的字符串。

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>

Answer 2

Working CodePen 。

清除后，您需要将li's附加到ul元素上，例如：

var ul = document.querySelector('ul[data-category]');

//Clear your ul
ul.innerHTML = "";

for (i = 0; i < uniqueCategoryGroupNames.length; i++) {
    sortedCategoryItems[i] = [ ];

    for (j = 0; j < categoryItems.length; j++ ){
      if (uniqueCategoryGroupNames[i] === categoryItems[j].getAttribute('data-group')) {
        sortedCategoryItems[i][j] = categoryItems[j];

        //Append your li's 
        ul.appendChild( sortedCategoryItems[i][j] ); 
      }
    }
  }
}

用数组结果替换<li>元素

2 个答案: