如何对具有相同值的元素进行排序

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);
}