JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="filterlist">
<div id="filter1">
filter 1 init
</div>
<div id="filter2">
filter 2 init
</div>
<div id="filter3">
filter 3 init
</div>
</div>
JavaScript
$.widget('ts.filterlist', {
options: {
filters: []
}
,_displaySelected: function() {
var msg = '';
for(i in this.options.filters) {
msg += this.options.filters[i].filter('getSelected') + '\n';
}
alert(msg);
}
,_create: function() {
var that = this;
// loop over filter divs and create widgets
// append filter widgets to 'filters' option for iteration
$("div",this.element).each(function(){
that.options.filters.push(
// init new filter with an id from the dev
$(this).filter({
id: $(this).attr('id'),
selected: []
})
);
});
// ------- TEST 1 - begin ------------------
// use js array push to append the value 'test val' to the first filter. Filters 2 and 3 should remain blank.
$(that.options.filters[0]).filter('appendSelected');
this._displaySelected();
// ------- TEST 1 - end --------------------
/*
// ------- TEST 2 - begin -------------------
// set the selected value in the first filter to 'set val'
$(that.options.filters[0]).filter('setSelected');
this._displaySelected();
// then append 'test val' and it only updates the first filter... Filters 2 and 3 should remain blank
$(that.options.filters[0]).filter('appendSelected');
this._displaySelected();
// ------- TEST 2 - end ---------------------
*/
}
});
$.widget('ts.filter', {
options: {
id:''
,selected: []
}
,setSelected: function() {
// without using push, set the selected value of this filter
this.options.selected = ['set val'];
}
,appendSelected: function() {
// append new value to the test val
// **...