【jQuery】数字の末尾を取得する方法

数あるリストの中から数字の下一桁を取得したかったのでその備忘録。

$(function(){
    /* ツールチップ */
    $('.list').mouseover(function(){
        // ホバーした時のindexを取得
        let index  = $(this).index();
        // 取得したindexを文字列に変換
        let str    = index.toString();
        // splitで文字列を一つずつ配列に格納
        let strAry = str.split('');
        // 末尾の数字を取得
        let last   = strAry.slice(-1)[0];

        // 以下に処理を記述
    });
    $('.list').mouseout(function(){
        // マウスアウトの時の処理を記述
    });

気をつけないといけないのは、ただインデックスを取得しても出来ない。
数字は分割できないし、手っ取り早く文字列にキャストして
その文字列を操作して、下一桁を取得することが一番楽かも。

メソッドの説明

index

要素の順番を取得する

let index = $(this).index();

ホバーした要素の番号を取得する。
ホバーじゃなくてもクリックでも使える。

toString

数値を文字列で返してくれる。

let str = index.toString();

これで数字を文字列に変換している

split

文字列を任意の箇所で区切ることが出来る。

let strAry = str.split('');

- 1桁
['1']

- 2桁
['1', '2']

- 3桁
['1', '2', '3']

ここでは、特に指定することはなくstrに入っている数字を一個ずつ分割して配列に格納している。

slice

引数にインデックスを指定すると、指定した順番の要素だけを取得します。

let last   = strAry.slice(-1)[0];

ここでは、slice(-1)とすることで配列に入れたstrAryから一番最後の要素を取得する。
返り値の型は配列なので、[0] を指定する。

まとめ

最初は数字を取得すれば下一桁は取得できると思っていたけど、数字型のままだと取得は無理そう。
いったん文字列にするのもいい方法かわからないけど、現状ではこれが精一杯。
書けば覚えてくるからjQueryは苦手だけど少しずつ書いていこう。