【jQuery】classを用いて要素を取得し、その親要素をJSON形式に変換する方法

ソースコード

<table> 
    <tbody>
        <tr data-price='"height5":5000,"height10":10000,"height15":15000'>
            <th>高さ</th> 
            <td><input type="radio" class="radioHeight" name="height" children="height5:5センチ,height10:10センチ,height15:15センチ"></td>
        </tr>
    </tbody>
</table> 
    

//①input type="radio"であり、かつradioHeightというクラスがある要素を取得
var radioHeights = $('input[type=radio].radioHeight'); 

//②radioHeightsの親要素を「data-price属性が入った<tr>タグ」と指定し、その要素のdata('price')を変数に代入する 
var data_price = radioHeights.closest('tr[data-price]').data('price');

//③JSON.parseでdata_priceを配列にする 
    data_price = JSON.parse('{' + data_price + '}');

コードは上記のようになっています。

//コメントで解説を入れていますが、もう少しだけ詳しく解説します。

　

　

　

解説

<tr data-price=''>

data-priceはカスタム属性と言って、通常使われている属性以外を使いたい時に、オリジナルの属性を作る事が出来るものです。作る際はdata-〇〇という記述にしないといけません。詳しく知りたい方は「カスタム属性」を検索してみてください。

　

　

//②radioHeightsの親要素を「data-price属性が入った<tr>タグ」と指定し、その要素のdata('price')を変数に代入する 
var data_price = radioHeights.closest('tr[data-price]').data('price');

②についての補足となりますが、親要素の指定をするのは closest() となります。radioHeights.closest(‘tr[data-price]’)の意味は、「変数radioHeightsの親要素を<tr data-price=””>とする。」です。

　

　

//③JSON.parseでdata_priceを配列にする
data_price = JSON.parse('{' + data_price + '}');

③では JSON.parse() を使い変数data_priceを配列にしています。配列になったdata_priceをconsole.log(‘data_priceです’,data_price);などで表示してみると下記のようになっているはずです。

JSON形式
{height5:5000,height10:10000,height15:15000}

　

　

console.log('data_priceのheight5は',data_price["height5"]);
//data_price["height5"]

↑これをこんな感じで取得して、どこかに表示・代入すればOK