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)

Share on Twitter Share the post
Qihuan Piao

朴 起煥

東京で働いている「外人歴」9年のソフトウェア「ライター」。いつの間にか納豆が食えるようになり、これで日本に慣れきったと思いきやまだまだ驚きが続いてる。読んだり書いたりするのが好きで、自身の経験や本から得た「何か」をここに書き出してる。最近古本屋にハマってる。

他にも英語中国語で書いてます、よろしければチェックしてみてください。