Javascript Jquery元素的高级过滤

我有一个包含数据属性的元素的大列表

<ul>
   <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">
   <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">
   <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">
   <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">
   <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">
   <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">
</ul>

但我不知道如何将其转换为jquery选择器

---

谢谢

您可以像这样在jQuery中使用模式-

$('li[data-brandid^=1][data-finishid^=5]')

它会相应地查找由1和5组成的属性

以下是您可以使用的代码片段-

var choose=functionbrandId、finishId、typeid、constructionid{ //搜索brandid和finishid var sel=$'li[data brandid^='+brandid+'][data finishid^='+finishid+'][data typeid^='+typeid+'][data constructionid^='+constructionid+'] $'div'.appendsel； }; $'go'。单击，函数{ var brandIds=[]； var-constructionIds=[]； var typeIds=[]； var finishIds=[]； 如果$'brandid'.val.indexOf'，'！=-1 brandid=$'brandid'.val.split'，'； 如果$'finishid'.val.indexOf'，'！=-1 finishIds=$'finishid'.val.split'，'； 如果$'typeid'.val.indexOf'，'！=-1 typeid=$'typeid'.val.split'，'； 如果$'constructionid'.val.indexOf'，'！=-1 constructionid=$'constructionid'.val.split'，'； $.eachBrandId、functionbrInd、brand{ $.eachfinishIds，functionfinId，finish{ $.eachTypeId、functiontypeId、type{ $.eachconstructionId、functionId、construction{ 选择品牌、饰面、类型、结构； }; }; }; }; }; 品牌标识 完成ID 类型ID 施工ID 去 可用品牌-饰面-类型-构造 1 - 5 - 10 - 14 4 - 1 - 3 - 7 18 - 2 - 1 - 4 7 - 4 - 4 - 5 4 - 8 - 1 - 2 2 - 12 - 2 - 16 选定品牌-饰面-类型-施工

---

我刚刚写了一个这样的过滤器，如果你知道如何开始的话，它实际上非常简单

我们假设每个有源滤波器都有一个类=有源。此外，我们假设每个复选框都有一个数据属性，该属性保存过滤器的名称，例如data filter=brandid，以及一个数据属性，该属性保存应选择的值，例如data value=1

这假设我们可以开始构建函数

$items = $('li');

// Whenever a user changes a checkbox we want to filter our data
$('input[type="checkbox"]').change(function(){

    // We toggle the active-class to dis/enable our filter
    $(this).toggleClass('active');

    // We need an object holding our filters
    var filter = {};
    var $filtered = $items;

    // We select all active filter here and push them to the array
    $('input[type="checkbox"].active').each(function(){

        // When a filter with this type didnt exists in our object we create a new one
        if(filters[$(this).data('filter')] === undefined) filters[$(this).data('filter')] = {};

        // Then we push the filter to our array
        filters[$(this).data('filter')].push($(this).data('value'));

    });

    // We loop through every filter, select all elements which match the
    // filter and apply it to the $filtered selection
    // The items left is the desired collection
    for(var i in filters){

        // For every filter in our object
        // (which can hold multiple filters of one type)
        // we build a selector.
        // We join the selectors using `,` to get an `or`-selection
        selector = filters[i].map(function(value){
            return '[data-'+i+'="'+value+'"]';
        }).join(',');

        // Apply the filter
        $filtered = $filtered.filter(selector);
    }

    // $filtered now holds all elemets left
    // do with this elements what you want

}

---

？使用。使用过滤器callback@Karl-安德烈·加农：没那么简单。如果他们选择Brand1、Brand2和Finish1，这意味着他们想要Finish1的产品是Brand1或Brand2，并非所有产品都是Finish1或brand1或brand1您可能需要更好/更清楚地解释您对我们这些不会说SQL的人的要求，这肯定包括我。@JackPilowsky我很确定我的回答在这里会有所帮助。请检查一下！Aswin，谢谢你的回答，但这不起作用，因为用户可以为每个过滤器提交多个选择。例如，他们可以选择品牌1、3和7。现在呢？我想最终你得用这个模式来选择这个模式？我不知道你是什么意思？你要用这样的模式来搜索元素。。[data brandid^=1][data finishid^=5][data typeid^=10][data constructionid^=4]等。。看看这个-@JackPilowsky。。更新了代码段。。对每个文本框使用逗号分隔的值。。让我知道它是否有意义

$items = $('li');

// Whenever a user changes a checkbox we want to filter our data
$('input[type="checkbox"]').change(function(){

    // We toggle the active-class to dis/enable our filter
    $(this).toggleClass('active');

    // We need an object holding our filters
    var filter = {};
    var $filtered = $items;

    // We select all active filter here and push them to the array
    $('input[type="checkbox"].active').each(function(){

        // When a filter with this type didnt exists in our object we create a new one
        if(filters[$(this).data('filter')] === undefined) filters[$(this).data('filter')] = {};

        // Then we push the filter to our array
        filters[$(this).data('filter')].push($(this).data('value'));

    });

    // We loop through every filter, select all elements which match the
    // filter and apply it to the $filtered selection
    // The items left is the desired collection
    for(var i in filters){

        // For every filter in our object
        // (which can hold multiple filters of one type)
        // we build a selector.
        // We join the selectors using `,` to get an `or`-selection
        selector = filters[i].map(function(value){
            return '[data-'+i+'="'+value+'"]';
        }).join(',');

        // Apply the filter
        $filtered = $filtered.filter(selector);
    }

    // $filtered now holds all elemets left
    // do with this elements what you want

}