get とは
- ここで説明する get とは次の語句からなる jQuery のメソッドです。
- get
- 読み: ゲット
意味: 得る、確保する
get メソッドの概要
このメソッドは、jQuery セレクターによって取得した jQueryオブジェクトから、インデックス番号の指定による単独の HTMLElement を取得します。 また、メソッドの引数が空の場合には Array<HTMLElement> として要素の配列を取得します。
セレクターの設定によって jQueryオブジェクトは 単数、または複数の要素を取得します。 このメソッドは、その単数、または複数に限らず、引数に指定したインデックス番号の要素を HTMLElement として取得することができます。
このメソッドを使う利点として、HTML 要素を HTMLElement として取得できるということは、 このメソッドに続けてチェーンメソッドから JavaScript のメソッドやプロパティが利用できるということです。
これは jQuery のメソッドやプロパティだけでは処理しずらいものを JavaScript のメソッドやプロパティなども織り交ぜて処理することが可能になります。
だだ 一方で考えられるのは、JavaScript と jQuery は同じものという認識でみれば、 jQuery のコードと JavaScript のコードを混ぜて記述することも普通にあるので get() の利用は必須ではないかもしれません。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).get(index)
このメソッドの引数を空にした場合、Array<HTMLElement> を返します。
結果、以下のコードは同じ要素を取得することになります。
.get(0).get()[0]
サンプルコードと実行結果
ここでは 要素に clsExample という class を付けたものを 3つ用意しました。 各要素には識別可能な id 属性の値も付けています。
この要素らを jQセレクターで取得したのち、get() メソッドを使って HTMLElement の配列として取得しなおします。 これにより、jQuery から直接は利用できない JavaScript の innerText プロパティや id プロパティを利用できるようになります。
サンプルコード: CSS
<style>
.clsExample{
background-color: ##khaki;
border: thin solid ##gray;
margin: 1em 0;
padding: 0.5em;
text-align: center;
width: 30%;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class ="clsExample" id="idDiv1"> Div要素 1 </div>
<div class ="clsExample" id="idDiv2"> Div要素 2 </div>
<div class ="clsExample" id="idDiv3"> Div要素 3 </div>
<button id="idButton"> ボタン </button>
<script>...</script>
</body>
- 06, 07, 08: div class="clsExample" (この class の各要素には id 属性を設定しています。)
- 09: button id="idButton" (このボタンがクリックされると script コードの 03 ~ 07 行が実行されます。)
サンプルコード: script
<script>
let arrEx = $(".clsExample");
$("#idButton").click(function(){
for(i = 0; i < arrEx.get().length; i++){
arrEx.get(i).innerText = arrEx.get(i).id;
}
});
</script>
- 02: arrEx = $(".clsExample") (arrEx に jQオブジェクトを使って要素配列を代入します。)
- 03-07: $("#idButton").click(function(){ 処理 } (idButton の要素がクリックされると { 処理 } の部分を実行します。)
- 04-06: for(i = 0; i < arrEx.get().length; i++){ 処理 } (arrEx の配列数だけ繰り返し処理を実行します。)
- 05: arrEx.get(i).innerText = arrEx.get(i).id; (arrEx.get(i) で特定した要素のテキストに id 値を出力します。)