Question

What would be the best way to optimise(shorten) this block of code?. I’m using the Jquery UI plugin ‘select menu’ to assign to a select number of elements.

$('footer#footer form select').selectmenu({
    style: 'dropdown',
    appendTo: 'footer#footer form span'
});

$('form.filters section.grid .industry select').selectmenu({
    style: 'dropdown',
    appendTo: 'form.filters section.grid .industry'
});

$('form.filters section.grid .subject select').selectmenu({
    style: 'dropdown',
    appendTo: 'form.filters section.grid .subject'
});

$('form.filters section.grid .year select').selectmenu({
    style: 'dropdown',
    appendTo: 'form.filters section.grid .year'
});


$('form.filters section.grid .organiser select').selectmenu({
    style: 'dropdown',
    appendTo: 'form.filters section.grid .organiser'
});

Answer 1

You could a map of “selectors” to the “append” part

var parts = {
    'footer#footer form select'                  : ' span',
    'form.filters section.grid .industry select' : '',
    'form.filters section.grid .subject select'  : '',
    'form.filters section.grid .year select'     : '',
    'form.filters section.grid .organiser select': ''
};

for (var p in parts) {
    $(p).selectmenu({
        style: 'dropdown',
        appendTo: p.replace(" select", parts[p])
    });
}

---

Or you could do this.

$('footer#footer form select').selectmenu({
    style: 'dropdown',
    appendTo: 'footer#footer form select span'
});

$('form.filters section.grid .row * select').each(function() {
    $(this).selectmenu({
        style: 'dropdown',
        appendTo: $(this).closest('.span3')
    });
});