根據數據屬性過濾 html 元素

Question

我有以下 html 結構

<div id="container">
    <div id="child_1" data-customId="100">
    </div>
    <div id="child_2" data-customId="100">
    </div>
    <div id="child_3" data-customId="100">
    </div>
    <div id="child_4" data-customId="20">
    </div>
    <div id="child_5" data-customId="323">
    </div>
    <div id="child_6" data-customId="14">
    </div>
</div>

我想要做的是獲取包含不同數據屬性的子 div 的計數。 例如，我正在嘗試這個：

$(`div[id*="child_"]`).length); // => 6

但是該代碼返回 6，而我要檢索的是 4，基於不同的 data-customId。 所以我的問題是，如何將過濾器/映射添加到我已經擁有但考慮到數據屬性的選擇器。

我試圖做這樣的事情：

var divs = $(`div[id*="child_"]`);
var count = divs.map(div => div.data-customId).length;

Answer 1

您必須從每個中提取屬性值，然后計算唯一值的數量。

 const { size } = new Set( $('[data-customId]').map((_, elm) => elm.dataset.customid) ); console.log(size);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="child_1" data-customId="100"> </div> <div id="child_2" data-customId="100"> </div> <div id="child_3" data-customId="100"> </div> <div id="child_4" data-customId="20"> </div> <div id="child_5" data-customId="323"> </div> <div id="child_6" data-customId="14"> </div> </div>

不過，對於這種微不足道的事情，不需要 jQuery。

 const { size } = new Set( [...document.querySelectorAll('[data-customId]')].map(elm => elm.dataset.customid) ); console.log(size);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="child_1" data-customId="100"> </div> <div id="child_2" data-customId="100"> </div> <div id="child_3" data-customId="100"> </div> <div id="child_4" data-customId="20"> </div> <div id="child_5" data-customId="323"> </div> <div id="child_6" data-customId="14"> </div> </div>

請注意，屬性customid在 JavaScript 中是小寫的。 這可能是一個容易混淆的地方。 您可以考慮將 HTML 從

data-customId="14"

至

data-custom-id="14"

這樣您就可以在 JS 中使用customId （遵循通用約定）。

Answer 2

在您獲得child-divs map 他們的customid並獲得unique values的長度后：

 let divs = document.querySelectorAll(`div[id*="child_"]`); let idCustoms = [...divs].map(div=>div.dataset.customid); //idCustoms: ["100", "100", "100", "20", "323", "14"] //get unique values with Set console.log([... new Set(idCustoms)].length);//4 //or with filter console.log(idCustoms.filter((item, i, ar) => ar.indexOf(item) === i).length);//4

 <div id="container"> <div id="child_1" data-customId="100"> </div> <div id="child_2" data-customId="100"> </div> <div id="child_3" data-customId="100"> </div> <div id="child_4" data-customId="20"> </div> <div id="child_5" data-customId="323"> </div> <div id="child_6" data-customId="14"> </div> </div>

注意： $相當於js中的document.querySelectorAll返回一個NodeList這就是為什么我用三個點來解構它...