Kinopyo Blog

htmlにoptionが一つしかないselectboxがあるとします。

このようなselectを非表示にし、そのテキストラベルで表示させたいのもありですね。

1

jQuery文はこれ：

//:only-childフィルタで子要素が一つしかない要素を選択
var $target = $("select :only-child");

$.each($target, function(index, item) {

	// spanのhtmlを構築
	var span = '' + $(this).text() + '';

	// 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)

toggle()の普通の使い方は多分皆さんご存知だと思います。

該当要素をクリックするたびに表示/非表示を切り替えます。

今日紹介するのはこのswitchパラメータ付のtoggleです。

swtich文を評価しtrueであれば要素を表示、falseであれば非表示です。

これで下記のコードがこのswtich付きのtoggle文なら一行ですみます。

if (name == "kinopyo") {
	$("p").show();
} else {
	$("p").hide();
}

これがこうなります。

$("p").toggle(name == "kinopyo");

どうですか？すごくないですか？

まさにjQueryの「The Write Less, Do More」ですよね。

ただし判断の条件文が行の最後になるので、

読みやすさは多少落ちると思います。

ちなみに、Googleの単語とよく似ているので、ついついtoogleと書いちゃいますorz