javascript - 优化 JQuery

Question

优化(缩短)这段代码的最佳方式是什么？我正在使用 Jquery UI 插件“选择菜单”来分配选定数量的元素。

$('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

使用类和[data-*] 属性将数据传递给jQuery:

$('select.selectMenu').each(function () {
    $(this).selectmenu({
        style: 'dropdown',
        appendTo: $(this).data('target')
    });
});

这依赖于更改标记，以便选择元素具有正确的类，并将它们的 [data-target] 属性设置为适当的值。

<select class="selectMenu" data-target="footer#footer form span">
    ...options...
</select>

---

each 主体和 HTML 的几个变体:

使用整个data对象:

$(this).selectmenu($(this).data());

<select data-style="dropdown" data-append-to="footer#footer form span">

使用一个[data-*]属性:

$(this).selectmenu($(this).data('selectmenu'));

<select data-selectmenu='{"style":"dropdown","appendTo":"footer#footer form span"}'>