從HTML創建數組

Question

我有4個圖表，每個圖表在html中都有自己的div。 我試圖找到自動將這些圖表添加到數組中的最佳方法，而不必在每次更改圖表及其ID時都更新數組。

HTML：

<table id="dashboard" cellpadding="0" cellspacing="0">
    <tr>
        <td id="c1"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="c2"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>

    </tr>
    <tr>
        <td id="c3"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="c4"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <!--<td id="BottomRight"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>-->
    </tr>   
</table>

JS：

var arrOfChartContainers = ["c1","c2","c3","c4"];  <-- I want to automate this

Answer 1

DEMO

var x = $('.chartLoadingOverlay').closest('td').map(function () {
    return this.id;
}).get();
console.log(x);

。地圖（）

Answer 2

@Tushar Gupta有一個很好的答案。 這是我的2便士的價值，以防萬一。

var arrOfChartContainers = [];
$('table td').each(function() {
    arrOfChartContainers.push(this.id);
});
console.log(arrOfChartContainers);

小提琴