jQuery 「ユーティリティ」反復処理や条件判断に便利なメソッド
$.each()は、jQueryを使ったスクリプティングでは特に使用頻度の高い反復処理のためのメソッドです。オブジェクトや配列の要素を順に走査し、各要素に対してコールバック関数を実行します。コールバック関数には、現在の要素のインデックスと、現在の要素が引数として渡せます。なお、反復処理をすぐに止めてループから脱出したいときは、コールバック関数から「return false亅します。なお、$.each()は配列、オブジェクトを対象とします。
jQueryオブジェクトを対象とする場合は、jQueryオブジェクト.each()を使用します。
$.contains()は、DOM要素を2つ引数として渡し、要素1に要素2が内包されるかどうかをtrueまたはfalseで返します。
$.inArray()は、配列に値が含まれているか調べ、マッチした最初の要素のインデックス値を返します。値にマッチする要素が配列中になかった場合は、-1が返ります。
す。
$.isArray()は、引数が配列かどうかを調べ、trueまたはfalseを返しま
$.isEmptyObject()は、引数がプロパティを持たない空のオブジェクトの場合にtrueを返します。
$.isPlainObject()は、引数が「{‘key’:’value’}」や「newObject」で生成されたオブジェクトかどうかを判定し、trueまたはfalseを返します。
$.isXMLDoc()は、引数がXMLドキュメントか、XMLドキュメント中のDOMノードならtrueを返します。
$.isNumeric()は、引数が数値または数値として評価可能な文字列ならtrue、そうでなければfalseを返します。
$.type()は、引数として与えられた対象の「型」を返します。例えば「$.type(5)」は”number”、「$.type(‘Hello”)」は”string”を返します。”undefined”,”array”,”boolean”,”regexp”,”null”なども判定して返してくれますので、デバッグにも有用なメソッドです。
これらのメソッド群は、条件分岐が必要なときに、複雑なコードを書かなくても簡潔に条件判断の根拠を得られます。
他に、$.isFunction()や$.iswindow()メソッドがありますが、これらのメソッドはjQuery3.3で非推奨になりました。
書式
$.each(オブジェクトまたは配列 , コールバック(インデックス , 配列またはオブジェクトの要素))
$.contains( 要素1 , 要素2 )
$.inArray( 値 , 配列 )
$.isArray( オブジェクト )
$.isEmptyObject( オブジェクト )
$.isPlainObject( オブジェクト )
$.isXMLDoc(ノード)
$.isNumeric( 値 )
$.type( 対象 )$.each(arr, function(i,n){ ・・・処理・・・ })
$.contains(document.documentElement, document.body)
$.inArray('hello', arr)
$.isEmptyObject(obj)
$.isPlainObject(obj)
$.isXMLDoc(obj)
$.isNumeric(value)
$.type(value)サンプル
１、eachを使って反復処理を行う
<script>
$(document).ready(function(){
var arr = [ 'おはよう', 'こんにちは','ごきげんよう','おやすみ','さようなら' ];
$.each(arr, function(){
alert(this);
});
});
</script>
２、変数が配列かどうか判断する
<script>
$(document).ready(function(){
var arr = [ 'おはよう', 'こんにちは','ごきげんよう','おやすみ','さようなら' ];
if($.isArray(arr)){
alert('配列です');
}else{
alert('配列ではありません');
}
});
</script>
３、変数が関数かどうか判断する
<script>
$(document).ready(function(){
var func = function(){return true;}
if($.isFunction(func)){
alert('関数です');
}else{
alert('関数ではありません');
}
});
</script>
４、要素Aが要素Bを内包するか判断する
<script>
$(document).ready(function(){
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
if($.contains(outer, inner)){
alert('outerはinnerを含む');
}
});
</script>