根据数据属性过滤 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这就是为什么我用三个点来解构它...