jquery - Javascript API writing -

<div id ="filter">     <select id= "s1"/>     <select id= "s2"/>     <select id= "s3"/>     <select id= "s4"/>     <select id= "s5"/>     <select id= "s6"/> </div> 

so create filters select elements of different ids in each of many data population , change events similar. wanted create api this:

new filter({ele1:$("#s1"), ele2:$("#s2"), ele3:$("#s3"), ele4:$("#s4")}) 

this filter should handle population , change events.

function filter(map) {    this.ele1 = map.ele1.id;    this.ele2 = map.ele2.id;    //similarly other elements.     this.e1e1.change(function(){        //these elements uses selectors of other elements how can access ele2, ele3 , on...    }); } 

the problem here change events should able access other variables ele2,ele3 of filter object.

i'm not sure question is, juggling id-s contraproductive, when use library strong selector engine.

function addchangeevents(selector) {     //all elements in selector, why bother mapping them other array object?      selector.change(function () {         var $this = $(this); //this element change event fired on          selector.each(function () { //selector "list" of elements             //you can access elements of selector             console.log(this); //here element iterating over.              console.log(this.id);              console.log($this); //you can access $this variable defied in outer function         });     }); } 

and can call like:

addchangeevents($('#filter select')); 

the variable selector contain elements need. available after addchangeevents code executed (in callback of change event).

does answer question?

---

edit:

or perhaps mapping because there more 1 list of selects:

<div id="filter">     <select id="s1"/>     <select id="s2"/>     <select id="s3"/> </div> <div id="other_filter">     <select id="s4"/>     <select id="s5"/>     <select id="s6"/> </div> etc... 

in case can call addchangeevents function more once:

addchangeevents($('#filter select')); addchangeevents($('#filter2 select')); 

you can iterate through filters if add class like:

<div id="filter" class="filter">     <select id="s1"/>     <select id="s2"/>     <select id="s3"/> </div> <div id="filter2" class="filter">     <select id="s4"/>     <select id="s5"/>     <select id="s6"/> </div> <div id="filter3" class="filter">     <select id="s7"/>     <select id="s8"/>     <select id="s9"/> </div> 

and select elements given class:

$('.filter').each(function () {     addchangeevents($(this).find('select')); });