[js]指定した属性の要素名を確認する方法

初めてやった。

方法
活用例
注意点

方法

こんなのがあったとして

<input type="text" name="sample[]" value="">
<select name="sample[]"><option value=""></option></select>
<button type="submit">submit</button>

こう。

$(function(){
    $('button').on('click',function(){
        console.log($('[name="sample[]"]').get(0).tagName); //INPUT
        console.log($('[name="sample[]"]').get(1).tagName); //SELECT
    })
})

またはこう。

$(function(){
    $('button').on('click',function(){
        var num = $('[name="sample[]"]').length;   
        for(let i = 0; i < num; i++){
            console.log($('[name="sample[]"]').get(i).tagName);
        }
    })
})

「.tagName」を使うと取得できる。尚、.tagNameの前に.get()を入れないと動かない。

ピンポイントでチェックする場合なら、.get()を使わずに.prop()でもいける。

$(function(){
    $('button').on('click',function(){
        $('[name="sample[]"]').each(function(){
            console.log($(this).prop('tagName'));
        })
    })
})

例えば、forの場合はget、eachの場合はpropみたいな使い分けかしらね。

活用例

<input type="text" name="sample[]" value="">
<select name="sample[]"><option value=""></option></select>
<button type="submit">submit</button>

$(function(){
    $('button').on('click',function(){
        var num = $('[name="sample[]"]').length;   
        for(let i = 0; i < num; i++){
            if($('[name="sample[]"]').get(i).tagName == 'INPUT'){
                alert('未入力だよ');
                return false;
            }
        }
    })
})

特定の要素に対してバリデーションを作れる。

上記の例でいうと、そもそもformで異なる要素で同じnameを使用するケースはほぼ無いのだけど。というか、バリデーションを仕込むなら普通はHTML側で必須にするし、そうでなくてもclassなりidで指定できるようにする。普通なら。でもレアケースは存在するわけで。

バリデーションに限らず、後付で機能をつけたいけどHTMLを触れないときに活躍するのかもね。

注意点

動作確認を兼ねて、alertなりconsole.logなりで一旦出力した方がいい。

出力した内容を使って条件分岐を組む必要がある。

大文字で出てるのに、小文字で条件分岐を仕込むと発火しない。