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

Trying to output a list of unique data-attributes (jQuery/Java)

本文关键字：jQuery Java 列表 输出 唯一 数据属性      更新时间：2023-09-26

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

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

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

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

我已经尝试了非常基本的Approcah，但它将帮助您理解

.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

相关文章：