按字母排序后鏈接未更改-有解無憂

我有一個按字母順序排序的串列，但是li如果我在排序后驗證元素鏈接，則每個鏈接都不會改變。無法弄清楚我錯過了什么。

任何有關解釋的幫助將不勝感激。

我的 HTML 代碼：

<ul class="row list-unstyled" id="testingList">
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/1" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">Pink</h3>
        </div>
      </div>
    </a>
  </li>
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/2" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">White</h3>
        </div>
      </div>
    </a>
  </li>
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/3" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">Brown</h3>
        </div>
      </div>
    </a>
  </li>
</ul>

我的 JS 代碼：

let pickList = document.querySelector("#testingList");

let li = pickList.querySelectorAll("a");

resultList = [];

for (let i = 0; i < li.length; i  ) {
  resultList.push(li[i].innerHTML);
  console.log(resultList);
}

resultList.sort();

for (let j = 0; j < li.length; j  ) {
  li[j].innerHTML = resultList[j];
}

uj5u.com熱心網友回復：

您正在重寫<a>元素的 innerHTML，但沒有更改它們的.href屬性。只是移動元素而不是重建它們可能更簡單。

let pickList = document.querySelector("#testingList");

let lis = [...pickList.querySelectorAll("li")];

lis.sort((a, b) => {
  // sort on the text of the h3 elements contained within
  const asort = a.querySelector('h3.top-box__title').innerText;
  const bsort = b.querySelector('h3.top-box__title').innerText;
  return asort.localeCompare(bsort);
});

// append each li to the list in order
lis.forEach(li => pickList.appendChild(li));

<ul class="row list-unstyled" id="testingList">
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/1" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">Pink</h3>
        </div>
      </div>
    </a>
  </li>
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/2" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">White</h3>
        </div>
      </div>
    </a>
  </li>
  <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/3" target="_blank">
      <div class="row no-gutters">
        <div class="col">
          <h3 class="top-box__title">Brown</h3>
        </div>
      </div>
    </a>
  </li>
</ul>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451947.html

標籤：javascript 列表排序

上一篇：Spinner不使用三元運算子

下一篇：消除”？”從所有錨文本