Search code examples
javascriptjqueryselectorstring-concatenation

Merge jquery selector [javascript string concat]


I'm trying to make a jquery-selector generator for my two filters - the aim is just hidding some elements in a calendar -

If I filter on the group DB_ID 2 and on the personn DB_ID 1 I would like to generate the following selector : #mod_calendar .gid_2.pid_1

If I filter on the group DB_ID 2 I would like to generate the following selector : #mod_calendar .gid_2

If I filter on the personn DB_ID 1 I would like to generate the following selector : #mod_calendar .pid_1

If I filter on the group DB_ID 2,5,6,8 and on the personn DB_ID 1 I would like to generate the following selector : #mod_calendar .gid_2.pid_1,#mod_calendar .gid_5.pid_1,#mod_calendar .gid_6.pid_1,#mod_calendar .gid_8.pid_1

If I filter on the group DB_ID 2,5,6,8 and on the personn DB_ID 1,2 I would like to generate the following selector : #mod_calendar .gid_2.pid_1,#mod_calendar .gid_5.pid_1,#mod_calendar .gid_6.pid_1,#mod_calendar .gid_8.pid_1#mod_calendar .gid_2.pid_2,#mod_calendar .gid_5.pid_2,#mod_calendar .gid_6.pid_2,#mod_calendar .gid_8.pid_2

And so one, I think you get the point... this https://jsfiddle.net/5mr60f6p/1 is what I tried so far but I'm kind of stuck at the moment.

[EDIT]

<div id="mod_calendar">
<div class="pid_1 gid_1">pid_1 gid_1 [do not match gid_filter should not be shown]</div>
<div class="pid_2 gid_2">pid_2 gid_2 [do not match pid_filter should not be shown]</div>
<div class="pid_5">pid_5 [do not match gid_filter should not be shown]</div>
<div class="pid_5 gid_2">pid_5 gid_2 [match gid_filter and pid_filter should be shown]</div>
</div>

JS code :

var pid_filter= [5,32,56,8,4];
var gid_filter=[2,5];
function generate_filter_selector(prefix,values){
    return prefix+values.join(','+prefix);
}
console.log($(generate_filter_selector('#mod_calendar .pid_',test)).show());
//I would like the intersection of both selector and not like I did one after the other.
console.log($(generate_filter_selector('#mod_calendar .gid_',test2)).show());

What I would like to obtain with this exact exemple and those two arrays is this :

$("#mod_calendar pid_5.gid_2,#mod_calendar pid_32.gid_2,#mod_calendar pid_56.gid_2,#mod_calendar pid_8.gid_2,#mod_calendar pid_4.gid_2,#mod_calendar pid_5.gid_5,#mod_calendar pid_32.gid_5,#mod_calendar pid_56.gid_5,#mod_calendar pid_8.gid_5,#mod_calendar pid_4.gid_5").show();

Like I said in the comment I would like to have the intersection of both filters.


Solution

  • or even faster :

    function generate_jquery_selector_from_fitlers(filters,prefix,item_prefix){
            prefix = prefix || '';
            item_prefix = item_prefix || '.';
            return prefix+item_prefix+allPossibleCases(filters).join(' ,'+prefix+item_prefix);
            function allPossibleCases(arr) {
                if (arr.length == 1) {
                    return arr[0];
                }
                else {
                    var result = [];
                    var allCasesOfRest = allPossibleCases(arr.slice(1));
                    for (var i = 0; i < allCasesOfRest.length; i++) {
                        for (var j = 0; j < arr[0].length; j++) {
                            result.push(arr[0][j] +'.'+ allCasesOfRest[i]);
                        }
                    }
                    return result;
                }
            }
    
        };
    

    jsfiddle : https://jsfiddle.net/prazj7qp/