ラボ > Javascript関連:DOM関連

jquery data属性から要素を取得(find())

「data-〇〇〇=""」の要素を取得したい

作成日:2020-09-17, 更新日:2020-09-17

基本

「data-〇〇〇="×××"」で取得可能

「data-〇〇〇」を取得

var hoge = $('[data-〇〇〇]');

「data-〇〇〇="×××"」を取得

var hoge = $('[data-〇〇〇="×××"]');

サンプル

<div data-kind="food" data-item="tori">鶏精</div>
<div data-kind="sake" data-item="sake111111">無濾過生原純吟</div>
<div data-kind="sake" data-item="sake001101">生詰原酒純米酒</div>

<script>
console.log( $('[data-kind="foo"]').data('kind') ); // food
console.log( $('[data-kind="foo"]').data('item') ); // tori
console.log( $('[data-kind="foo"]').text() ); // 鶏精

// 「data-kind」を含む要素を取得して、ループ
$('[data-kind]').each(function(){
  if ( $(this).data('kind') == 'sake' ) {
    console.log( $(this).data('item') ); // 「sake111111」「sake001101」
  }
});
</script>