Webエンジニア目指して#25 - misokatsu

どうも連続風邪マンです。早く体調気にせず稼げる環境にしたいですねえ

今回はProgateのJQuery上級編です。

eqメソッド

$('セレクタ').eq(オブジェクト番号).処理メソッド;
対象セレクタを検索し、見つかった個数に番号を振ってeq(1)のように番号を指定し、それを対象に処理をさせます。

下の例のようにdivの中にpタグで囲われたテキストが複数あるとすると、
eqメソッドで$("p").eq(2).css("color","red");と記述すると上から数えて3つめのp要素が処理されます。
配列のような数え方なので0スタートで数えます。0,1,2の３番目ですね。
.jsのeq(2)の数字を0にすれば一番上のが対象になります。

See the Pen eq_method by 味噌カツサンド (@misokatsu_sand) on CodePen.

indexメソッド

$('セレクタ1').index($(セレクタ1内でオブジェクト番号を取得したいセレクタ2));
言葉で書くとメチャクチャですが・・・以下の例のようにクリックイベントでeqメソッドと組み合わせてやるのが使いやすそうです

See the Pen BaoNpNR by 味噌カツサンド (@misokatsu_sand) on CodePen.

クラス名：Textをクリックしたら、そいつのオブジェクト番号を取得して取得した番号のオブジェクトだけが赤文字になるようにしました。なんかもうコンボだらけですね

next,prevメソッド

$('セレクタ').<span style="color: #ff0000">next()</span>.処理系メソッド;
指定したセレクタの次の要素を選んで処理できる

$('セレクタ').<span style="color: #ff0000">prev()</span>.処理系メソッド;
指定したセレクタの前の要素を選んで処理できる

セレクタに複数要素入ってる場合はそれぞれの次まはた前の要素全てに処理が入ります。

eq,index,prev,nextを合わせたものがこれです。
テキスト本体をクリックしたときとnext.prevボタンをクリックしたときで同じ処理が入るところは関数でまとめました。

See the Pen Vwvdxvz by 味噌カツサンド (@misokatsu_sand) on CodePen.

末端で戻りや送りをすると選択要素がおかしくなるため、対応したボタンを非表示にしてます。

lengthメソッド

$('セレクタ').length
セレクタにある要素の数だけの数値を返します。
何かとセットで使うはずなのでセミコロンは無くしました。
使用例ですが、さっきのCodePenで説明すると
選択できるテキストの行数が増えた際に終端要素のIndex番号が変わります。
なのでIf文で定義した↓の部分の「3」の部分が対応できなくなります。

else if(selected_index==3){  
  $('.next-btn').hide();
}

そこで、３のところの代わりにlengthを使うことでどれだけ要素が増えても対応できるようになります。始端のIndex番号は0から変わらないんで触る必要なしと。
ただし、
Lengthは要素の数を1,2,3,...と素直に返すのに対し、
Indexは配列のように0,1,2,...とカウントするためLength-1で扱うところに注意。ではCodePen、Go

See the Pen length_method by 味噌カツサンド (@misokatsu_sand) on CodePen.

今までのを応用すると、ボタンを押したらスライドが切り替わるやつができるわけですね。JQueryやりきったら今までの総集編みたいなページを作りたいと思います

切り替え系についてはキリがいいのでこの辺にしときます。細切れに取り組みすぎて期間空きすぎなんですけど！？！？！？ではでは。