4

このコードブロックを最適化（短縮）するための最良の方法は何でしょうか？JqueryUIプラグインの「selectmenu」を使用して選択した数の要素に割り当てています。

$('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'
});
4

2 に答える 2

2

クラスと[data-*]属性を使用して、データをjQueryに渡します。

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

これは、select要素が適切なクラスを持ち、それらの[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">

1つの[data-*]属性を使用する：

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

<select data-selectmenu='{"style":"dropdown","appendTo":"footer#footer form span"}'>
于 2012-09-26T14:34:20.100 に答える
1

「セレクター」から「追加」部分へのマップを作成できます

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])
    });
}

または、これを行うことができます。

$('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')
    });
});
于 2012-09-26T14:33:01.660 に答える