[英]Filter html elements based on data attribute
I have the following html structure我有以下 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>
And what I want to do is to get the count of child divs that contains different data attribute.我想要做的是获取包含不同数据属性的子 div 的计数。 For example, I'm trying this:例如,我正在尝试这个:
$(`div[id*="child_"]`).length); // => 6
But that code is returning 6 and what I want to retrieve is 4, based on the different data-customId.但是该代码返回 6,而我要检索的是 4,基于不同的 data-customId。 So my question is, how can I add a filter/map to that selector that I already have but taking into consideration that is a data-attribute.所以我的问题是,如何将过滤器/映射添加到我已经拥有但考虑到数据属性的选择器。
I was trying to do something like this:我试图做这样的事情:
var divs = $(`div[id*="child_"]`);
var count = divs.map(div => div.data-customId).length;
You'll have to extract the attribute value from each, then count up the number of uniques.您必须从每个中提取属性值,然后计算唯一值的数量。
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>
No need for jQuery for something this trivial, though.不过,对于这种微不足道的事情,不需要 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>
Note that the property customid
is lower-cased in the JavaScript.请注意,属性customid
在 JavaScript 中是小写的。 This could be an easy point of confusion.这可能是一个容易混淆的地方。 You might consider changing your HTML from您可以考虑将 HTML 从
data-customId="14"
to至
data-custom-id="14"
so that you can use customId
in the JS (to follow the common conventions).这样您就可以在 JS 中使用customId
(遵循通用约定)。
After you getting the child-divs
map their customid
and just get the length of unique values
:在您获得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>
Note: $
is equivalent to document.querySelectorAll
in js
returns a NodeList that's why I destructure it by the three dots ...
注意: $
相当于js
中的document.querySelectorAll
返回一个NodeList这就是为什么我用三个点来解构它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.