Jqueryオブジェクトを関数の引数に指定して関数内で実行できるパターンのコード公開

Jqueryオブジェクトを関数の引数に指定して関数内で実行できるパターンがあいまいだったので調べてみました。
下記のようなHTMLを用意します。

<div id="eght" class="eght">
	<ul>
		<li class="text1"></li>
		<li class="text2"></li>
		<li class="text3"></li>
		<li class="text4"></li>
		<li class="text5"></li>
	</ul>
</div>

実験用のjavascriptは下記のような感じ

$(function(){
	$("#eght li.text1").text("success eghtText1");//CSSセレクターを直接指定
	eghtText2($("#eght li.text2"));//CSSセレクター直接指定したJqueryオブジェクト
	eghtText3("#eght li.text3");//CSSセレクターを指定
	eghtText4("#eght li.text");//CSSセレクターの一部を指定
	eghtText5("#eght");//上位CSSセレクターを指定
});
function eghtText2(obj){
	obj.text("success eghtText2");//Jqueryオブジェクトなので引数をそのまま使用できる
}
function eghtText3(str){
	var obj = $(str);//jQuery関数を使用しなければならない
	obj.text("success eghtText3");
}
function eghtText4(str){
	var obj = $(str+"4");//CSSセレクターの一部に文字連結しても使用できる
	obj.text("success eghtText4");
}
function eghtText5(str){
	var obj = $(str).find("li.text5");//find関数を利用して子孫要素から、指定条件式に合致するものを指定できる。
	obj.text("success eghtText5");
}

色んな指定方法がありますね。上記以外もありましたらコメント頂けると幸いです。

Related articles