Создание массива из HTML

Question

У меня есть 4 диаграммы со своими собственными div в html. Я пытаюсь найти лучший способ добавить эти диаграммы в массив автоматически, не обновляя массив всякий раз, когда я вношу изменения в диаграммы и их идентификаторы.

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); 

.map()

Answer 2

@Tushar Gupta имеет большой ответ. Вот мои 2 пенни, хотя на всякий случай.

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

Fiddle