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

Question

我有一个产品网格，我正在尝试通过为每个产品分配数据属性（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>

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

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

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

Answer 1

我已经尝试过非常基本的 Appprocah，但它会帮助你理解

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>

jQuery

$(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)

})

DEMO

功能参考

$.map

$.unique

$.data