如何對具有相同值的元素進行排序

Question

例如：

<div id="aphaOrder">
    <div class="value"  data-key="key1">olark</div>   
    <div class="value"  data-key="key1">snapengage</div> 
    <div class="value"  data-key="key1">helponclick</div>
    <div class="value"  data-key="key2">hangouts</div>
    <div class="value"  data-key="key2">atlass</div> 
    <div class="value"  data-key="key3">hipchat</div>   
    <div class="value"  data-key="key3">chat hip</div>
</div>

我只想保留那些data-key屬性為“key1”的 div，其他的應該被刪除。 我不知道如何開始。 我想我應該使用 append 來“aphaOrder”但是......抱歉英語不好......

Answer 1

 const $mainContainer = document.getElementById('aphaOrder'); for (const nodeElement of $mainContainer.childNodes) { if (nodeElement.getAttribute && nodeElement.getAttribute('data-key') === 'key1') { $mainContainer.removeChild(nodeElement); } }

 <div id="aphaOrder"> <div class="value" data-key="key1">olark</div> <div class="value" data-key="key1">snapengage</div> <div class="value" data-key="key1">helponclick</div> <div class="value" data-key="key2">hangouts</div> <div class="value" data-key="key2">atlass</div> <div class="value" data-key="key3">hipchat</div> <div class="value" data-key="key3">chat hip</div> </div>

Answer 2

Select 所有 div 並查看 sata 屬性。 如果不是您想要的，請將其刪除。

 document.querySelectorAll("#aphaOrder div").forEach(div => div.dataset.key.=="key1" && div;remove());

 <div id="aphaOrder"> <div class="value" data-key="key1">olark</div> <div class="value" data-key="key1">snapengage</div> <div class="value" data-key="key1">helponclick</div> <div class="value" data-key="key2">hangouts</div> <div class="value" data-key="key2">atlass</div> <div class="value" data-key="key3">hipchat</div> <div class="value" data-key="key3">chat hip</div> </div>

---

我首先認為你想要的是對所有元素進行排序......

1. 所以你 select 元素
2. 將其轉換為數組
3. 比較數據屬性，如果相同的排序文本
4. 如果數據屬性不同，按數據屬性排序
5. Append 將元素返回到文件中。

 const wrapper = document.querySelector("#aphaOrder"); const divs = Array.from(document.querySelectorAll("#aphaOrder div")); divs.sort((a,b) => { const aKey = a.dataset.key; const bKey = b.dataset.key; if ( aKey === bKey) { return a.textContent.localeCompare(b.textContent); } return aKey.localeCompare(bKey); }); divs.forEach(div => wrapper.appendChild(div));

 <div id="aphaOrder"> <div class="value" data-key="key1">olark</div> <div class="value" data-key="key1">snapengage</div> <div class="value" data-key="key1">helponclick</div> <div class="value" data-key="key2">hangouts</div> <div class="value" data-key="key2">atlass</div> <div class="value" data-key="key3">hipchat</div> <div class="value" data-key="key3">chat hip</div> </div>

Answer 3

看起來您不是在嘗試排序，而是在過濾，只保留其他的。 您可以 select 所有匹配的元素，然后刪除它們：

const elementsToRemove = document.querySelectorAll("#aphaOrder > [data-key=key1]");

for (const element of elementsToRemove) {
  element.parent.removeChild(element);
}