Kinopyo's Blog

よく出来ていると思います。

勉強になります。

siblings: function( elem ) {
	return jQuery.sibling( elem.parentNode.firstChild, elem );
},
children: function( elem ) {
	return jQuery.sibling( elem.firstChild );
},

そしてjQuery.sibling()の中身です！

nodeTypeが1の場合はelementノードの意味です。

nはループに使われて、elemは除外する要素です。

例えばsiblings()の場合は自分自身を除外しています。

for文の書き方も覚えとこう、、

javaでのIteratorのhasNext()関数みたいな動きをしていますね。

	sibling: function( n, elem ) {
		var r = [];

		for ( ; n; n = n.nextSibling ) {
			if ( n.nodeType === 1 && n !== elem ) {
				r.push( n );
			}
		}

		return r;
	}

$.inArray(value, array)

指定した値が配列中にあれば、そのインデックスを返します。

配列に存在しなければ戻り値は”-1″になりますので注意してください。

var array = ["a", "b", "c"];

if ($.inArray("d", array) == -1) {

    // d is not in array

}

下記のコードは間違いですよ。。。

if ($.inArray("d", array)) {}

$.isArray(obj)

パラメータで渡された値が配列であるかどうかを判別します。

戻り値はtrueかfalseです。

そもそもIDというのは一つのページ内でユニークなはずですが、

何らかの理由で同じIDを持つ形になったとしましょう。

その場合普通のjQueryの#idセレクタでは一つの要素(順番的に最初に合致した要素)しか選択できません。

そこで[id=xx]の形で属性フィルタで全ての選択することができます。

以下サンプルコードです。

$("#foo").css("background-color","gray");

$("[id=bar]").css("background-color","green");

use #id selector






use attribute selector [id=xx]

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