[jQuery]data属性に特定の値を持つ要素を指定する

知らないと地味にだるい。

やってく
変数で指定
条件分岐で指定
まとめ

やってく

buttonをクリックしたら同値のdataのやつが発火する的なのにするとして。

<button type="button" data-target="01"></button>
<button type="button" data-target="02"></button>
<button type="button" data-target="03"></button>
<ul>
    <li data-target="01"></li>
    <li data-target="02"></li>
    <li data-target="03"></li>
</ul>

これでやってくとして。

変数で指定

$(function(){
    $('button').on('click',function(){
        var target = $(this).data('target');
        $('li[data-target="'+target+'"]').slideToggle();
    })
})

条件分岐で指定

$(function(){
    $('button').on('click',function(){
        var target = $(this).data('target');
        $('ul').find('li').each(function(){
            if($(this).data('target') === target){
                $(this).slideToggle();
            }
        })
    })
})

まとめ

data属性を扱うときは処理が重くなるらしいんで、直接指定で済む程度のボリュームだったらidで指定するとかのほうがいいはずという大前提。

上記2種の使い分けは発火内容を変えたいかどうかですね。