jqueryなどで複数のdata属性の値を取得したい

Question

前提

jqueryで値の取得複数をしたいと思っています。

実現したいこと

• ▲▲data-dog_breed_idが複数ある時に複数の値を取得したい(この方法で実現できない時は、他の方法で対応可能)

該当のソースコード

genetic_row1などのようにデータがある分だけ配列ができる想定です。

<tr class="genetic" id="genetic_row1">
   <td>CL 神経セロイドリポフスチン症（CLN8</td>
   <td class="get_genetic_test_id" data-dog_breed_id="1">
   <select id="genetic_result">
     <option value="not_inspected1">未検査</option>
     <option value="clear1">クリア</option><option value="career1">キャリア</option>
     <option value="affected1">アフェクテッド</option>
   </select>
   </td>
   <td><input type="button" data-delete_id="genetic_delete1" id="item" value="削除"></td></tr>

上記は、犬種を選ぶとそれに紐づいた情報がajaxで呼ばれて作成されているものになります。

試したこと

      $('tr.genetic').children('td').data('dog_breed_id');
      $('.get_genetic_test_id').data('dog_breed_id');
　　document.getElementsByClassName('genetic').querySelectorAll('[data-dog_breed_id]');

$('.get_genetic_test_id').data('dog_breed_id');
を実施すると最初の一件だけ取得できるのですが、複数件取得したいです。

js関係あまり詳しくないのでよければ教えてください。

Answer 1

JQuery の map を使って

const ids = $('.get_genetic_test_id').map(function() {
  return $(this).data('dog_breed_id');
}).get();

とするとよいかもです。
サンプル 👉 https://codepen.io/su507/pen/mdxMZbB?editors=1011

Comments

[aushijima]

ありがとうございます。無事にidが取得できました。