jsでHTMLのdata属性を扱いたい

Question

wordpressです。
htmlで以下のようなブロックがあり、所々にdata-nameがあり、画像のurlが値に入っています。
そしてスクロールした時に、data-nameがあるところにスクロールが行き着いたら、そのdata-nameの値(画像url)を背景写真として切り替える、という風な挙動を書きたいです。

その上でjsでループ処理をしているのですが、ループ内でのdata-nameの扱い方がわからず困っています。

///背景切り替え
<section class="History_timeline_point trigger" data-name="<?php echo esc_url(get_template_directory_uri()); ?>/img/history0.jpg">
    <div class="year">アイテム１</div>
</section>

<section class="History_timeline_point">
    <div class="year">アイテム２</div>
</section>

///背景切り替え
<section class="History_timeline_point trigger" data-name="<?php echo esc_url(get_template_directory_uri()); ?>/img/history0.jpg">
    <div class="year">アイテム３</div>
</section>

<section class="History_timeline_point">
    <div class="year">アイテム４</div>
</section>

  let trigger = $('.trigger');
  let backTrigger = new Array;
  let backImg = new Array;

  //背景セット
  trigger.each(function(i){
    //それぞれトリガーの高さを入れる
    backTrigger[i] = $(this).offset().top;
　　//それぞれのdata-name(背景画像)をセット
    backImg[i] = $(this).dataset.name;    
  });

上記jsコードの、eachを回すところで、
backImgにdata属性をそれぞれ配列にセットしたいのですが、
backImg[i] = $(this).dataset.name;
の部分ががエラーになります。

TypeError: undefined is not an object (evaluating '$(this).dataset.name')

ループ内ではどのようにdata-nameの値を指定できるのでしょうか？
ご教授よろしくお願い申し上げます。

Answer 1

$を外して、this.dataset.nameとするのが手っ取り早いです。

Answer 2

jQueryですよね？

.data('name')

Comments

[maisumakun]

.dataからdata-xxx属性を参照すると、最初にデータを取った時点でjQuery内にキャッシュされてしまうので、jQuery外からdata-xxx属性を動かすような場面で使うには向かないことが考えられます。

[Yariii]

ありがとうございます。
$()をつけるとjQueryの中に格納されたから？なんですね。勉強になりました。

[yambejp]

ああ、失礼しました
jQueryのdataは必ずしもカスタムデータと合致しませんね
.prop('dataset')['name']
とか
.attr('data-name'')
で参照するべきでした