2009年11月28日
jQueryでoptionが一つのSelectボックスをラベル表示
htmlにoptionが一つしかないselectboxがあるとします。
このようなselectを非表示にし、そのテキストラベルで表示させたいのもありですね。
<select>
<option>1</option>
</select>
jQuery文はこれ
//:only-childフィルタで子要素が一つしかない要素を選択
var $target = $("select :only-child");
$.each($target, function(index, item) {
// spanのhtmlを構築
var span = '<span>' + $(this).text() + '</span>';
// thisはoptionを指しているため、そのparentのselect要素を非表示
// 構築したspanを挿入
$(this).parent().hide().after(span);
});
さらにブランクの要素をフィルタ
selectボックスの先頭がblankのケースが結構あると思います。
その場合はラベル表示させたくないです。
なのでそれをフィルタするには、以下のようにfilter()を使います。
var $target = $("select :only-child").filter(function(index) {
return $.trim($(this).text()).length != 0;
});
$.trim()の1000倍速い方法でブランクを検出
jQueryにはblankを検出するメソッドがないため、上記のソースコードでは
$.trim()を利用して判断しています。
しかしこの$.trim()は遅いとの報告がありました。
そこでblankのテキストを検出するためのメソッドも提供されました。
$.trim()が2000msかかったものがこれだと0.5msになったようです。
blank: function( text ) {
return !text || !/\S/.test(text);
}
興味のある方はこの記事を参照してください。英語のサイトです。
Zipalong Blog » Blog Archive » jQuery: x1000 faster test for blank strings (on large strings)