Javascript 尝试输出唯一数据属性列表（jQuery/Java）

我有一个产品网格，我正试图通过分配每个产品的数据属性（data category=“”data department=“”data color=“”等）来构建一个动态过滤系统。我需要输出每个数据属性的ul，其中只包含唯一选项（因此“小、中、大”，即使每个属性有多个实例，并且某些产品可能有多个（管道分隔）属性）

例如：

<div data-category="shorts" data-size="large" data-color="blue"></div> 
<div data-category="shorts" data-size="small|medium|large" data-color="green"></div>
<div data-category="shorts" data-size="small" data-color="green|red"></div>
<div data-category="shirts" data-size="medium" data-color="blue"></div>
<div data-category="sunglasses" data-color="black"></div>

对于这些数据，我试图得到三个列表

类别：短裤、衬衫、太阳镜
尺寸：大、中、小
颜色：蓝色、绿色、红色

---

并将它们粘贴到列表元素中。

我已经尝试了非常基本的方法，但它会帮助您理解

HTML

功能参考

---

我已经尝试了非常基本的方法，但它会帮助您理解

HTML

功能参考

---

这是一个理论问题吗？添加了一个示例，我已经构建的代码是如此丑陋和不成熟，我甚至不想复制和粘贴它。这是一个理论问题吗？添加了一个示例，我已经构建的代码是如此丑陋和不成熟，我甚至不想复制和粘贴它。谢谢，这对我帮助很大。很抱歉延迟接受你的回答。谢谢，这对我帮助很大。对延迟接受您的答复表示歉意。

<div data-category="shorts" data-size="large" data-color="blue"></div> 
<div data-category="shorts" data-size="large" data-color="green"></div>
<div data-category="shorts" data-size="small" data-color="red"></div>
<div data-category="shirts" data-size="medium" data-color="blue"></div>
<div data-category="sunglasses" data-color="black"></div>

$(function(){
     var output =[];
     var $cat =[]; 
     var $size = [];
     var $color =[];
    $('div').map(function (i){
        
        if( typeof $(this).data('category') == 'string') 
            $cat[i] = $(this).data('category')
        if( typeof $(this).data('size') == 'string') 
            $size[i] = $(this).data('size')
        if( typeof $(this).data('color') == 'string') 
        $color[i] = $(this).data('color');

    });
    output.push($.unique($cat),$.unique($size),$.unique($color));
    console.log(output); //or use alert(output)

})