List all table headers in jQuery

Question

How can I list all table headers in jQuery? My HTML table is below.

<table class="edit-table mobile-optimised break-words">
    <thead>
        <tr>
            <th scope="col">Location</th>
            <th scope="col">Date from/to</th>
            <th scope="col">Qty of<br>places</th>
            <th scope="col">Paid by £155.00 voucher<br>(net value)</th>
            <th scope="col">Paid by card<br>(net value)</th>
        </tr>
    </thead>
    <tbody>
        <tr class="no-records"><td colspan="5">No records to display.</td></tr>
    </tbody>
</table>

I would like to loop through each <th> and get the text value for each one.

Answer 1

You can iterate over th like following

$("table.edit-table thead tr th").each(function(){
    console.log($(this).text());
});

For reference - http://plnkr.co/edit/zphkd8pVICzQ0zZRcOfn?p=preview

Answer 2

$( "table thead tr th" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

see documentation : https://api.jquery.com/each/