javascript - Trying to get element and store them in array using jquery -

i have html structure :

<tr>     <td>nc</td>     <td><%= @subscriptions.where("users.ranking = 'nc'").count %></td>     <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'></td> </tr> <tr>     <td>40</td>     <td><%= @subscriptions.where("users.ranking = '40'").count %></td>     <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td> </tr> <tr>     <td>30/5</td>     <td><%= @subscriptions.where("users.ranking = '30/5'").count %></td>     <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td> </tr> 

i need write script each time checkbox checked gets innerhtml of first <td></td> of each <tr></tr> checkbox checked , returns array.

here's came :

$(document).ready(function(){     $('.checkbox-ranking').on('change', function() {         var rankings = $('.checkbox-ranking:checked').map(function() {             return $(this).parent().parent().parent().parent().children().first().html();         }).get().join(',');         alert(rankings);     }); }); 

i must add installed gem bootstrap-switch have on/off switch button , checkboxes are. noticed switch on button, doesnt pass checkedin html code, guess that's why code isnt working: script doesnt detects on change event.

any other ideas ?

ok, works

$(document).ready(function(){     $('.checkbox-ranking').on('change', function() {         var rankings = $('.checkbox-ranking:checked').map(function() {             return $(this).parent().parent().find('td:first-child').html();         }).get().join(',');         alert(rankings);       }); }); 

and jsfiddle: https://jsfiddle.net/btrauybx/2/