Question

There is data associated with certain items in a list for example below shows data added to one item using jQuery, the first one:

$('ul li :first').data('job', 'Developer');
$('ul li :first').data('company', 'Microsoft');
$('ul li :first').data('location', 'UK');

Where job, data, location all have check-boxes the user can select from for example:

<label>
    Developer<input type="checkbox"/>
</label>
<label>
    Tester<input type="checkbox"/>
</label>
<label>
    Lead Developer<input type="checkbox"/>
</label>
<label>
    Google<input type="checkbox"/>
</label>
<label>
    Microsoft<input type="checkbox"/>
</label>
<label>
    UK<input type="checkbox"/>
</label>
<label>
    US<input type="checkbox"/>
</label>

Initially all the items in the list are shown. When a user selects a check-box all items in the list that do not have that attribute are hidden.

Does anyone know an approach I can take with this where there are multiple options in job, company and location?

Answer 1

If you look at jQuery data() documentation you will see that value can be any Javascript type including Array or Object.

So you can do:

$('ul li:first').data('job', ['Developer', 'Cleaner', 'Cook', 'Time waster']);

or

$('ul li:first').data([{
  job: "Developer",
  company: "Microsoft",
  location: "UK"
},{
  job: "Manager",
  company: "Freelance",
  location: "Moon"
}]);

You can then add push members to array.

$('#my_checkbox').check(function(){
    $('ul li:first').data("job").push($(this).value());
});

Or add elements to hash, or do whatever you want with data structure you choose.