Using jQuery to manipulate and filter multiple html data attributes

Question

Hello stackoverflow users,

I would like to create a job list that will get filtered by 4 criterias, when one of those criterias applied by the user i would like my list to get filtered by jQuery live and the list to update and show the right results.

Take a look of my code:

A) HTML FILTERS

<select id="country">

<option>Italy</option>

<option>France</option>

....

</select>

<select id="industry">

<option>Finance</option>

<option>Internet</option>

....

</select>

<select id="remote">

<option>Yes</option>

<option>No</option>

....

</select>

<select id="sponsor-visas">

<option>Yes</option>

<option>No</option>

....

</select>

B) HTML JOB LIST

<div class="job-container" data-country="Italy" data-industry="Finance" data-remote="Yes" data-sponsor-visa="No">

//Here the content of a job eg: Images, Title and etc.

</div>

<div class="job-container" data-country="France" data-industry="Internet" data-remote="No" data-sponsor-visa="Yes">

//Here the content of a job eg: Images, Title and etc.

</div>

<div class="job-container" data-country="Spain" data-industry="Finance" data-remote="Yes" data-sponsor-visa="No">

//Here the content of a job eg: Images, Title and etc.

</div>

and goes on....

C) jQuery

var filters = [];

$('#industry').on('change', function(){

var value = $(this).val();

filters['industry'] = value;

filteredResults();

});

$('#country').on('change', function(){

var value = $(this).val();

filters['country'] = value;

filteredResults();

});

$('#remote').on('change', function(){

var value = $(this).val();

filters['remote'] = value;

filteredResults();

});

$('#sponsor-visas').on('change', function(){

var value = $(this).val();

filters['visa'] = value;

filteredResults();

});

function filteredResults() {

$('.job-container').each(function(){

var industry = $(this).attr('data-industry');
var remote = $(this).attr('data-remote');
var visa = $(this).attr('data-visa');
var country = $(this).attr('data-country');

if ( filters['industry'] == industry ) { // HERE I WOULD LIKE TO DO THE SAME WITH ALL FILTERS

$(this).fadeIn('fast'); 

}
else {

$(this).fadeOut('fast');

}

});

}

So what i want is when a user select a filter country by before has already select filter industry on change to hold filter industry and refresh list with a job that have the same industry and country

Sorry for my english,

I hope to find a solution

Answer 1

Iterate the container data. If any of the filters don't match set a flag to false

$('.job-container').each(function(){
   var isMatch = true, // true until a mismatch is found
       $cont = $(this), 
       container_data = $cont.data();

   $.each(container_data, function(key, value){
       // check if that filter has a value and if it doesn't match
       if(filters[key] && filters[key] !== value){
          isMatch = false;
          return false;// break each loop, no need to continue checking
       }
   }); 

   $cont[ isMatch ? 'fadeIn' :'fadeOut' ]('fast');

});

Above assumes that if no selection is made for a specific filter then the item should be included

DEMO