jQueryを使ってIDに対して個別のIDを設定する方法 #JavaScript

備忘録として残しています。

chart.jsで一画面に複数のチャートをおきたい時に使いたいなと思って書きました。

index.html

<!DOCTYPE html>
<html>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <canvas id="bar-chart-1" data-data-id="1" class="chart"></canvas>
        <canvas id="bar-chart-2" data-data-id="2" class="chart"></canvas>
        <script>
            $(function(){
                $('.chart').each(function(){
                    console.log(document.getElementById('bar-chart-' + $(this).data('data-id')))
                })
            })

        </script>

    </body>
</html>