Question

I got the following code from the designer:

<table class="items">
    <thead>
    <tr>
        <th id="name">name</th>
        <th id="category">category</th>
        <th id="zip">zip</th>
        <th id="city">city</th>
        <th id="street">street</th>
        <th id="latitude">latitude</th>
        <th id="longitude">longitude</th>
    </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>MyCompany</td>
            <td>Company</td>
            <td>18360</td>
            <td>Stroudsburg</td>
            <td>4 Scott Str.</td>
            <td>40.9891</td>
            <td>-75.1962</td>
        </tr>
    </tbody>
</table>

Using jQuery, how can I get the longitude and latitude values by taking into account the th elements with the specified id? The order of the columns might change later so direct indexing is not an option. However the id values will remain the same.

Answer 1

You can use the .index() method:

var latIndex = $("#latitude").index(),
    longIndex = $("#longitude").index();

// do something with the values from each row
$("tbody tr").each(function() {
   var $tds = $(this).find("td"),
       latValue = $tds.eq(latIndex).text(),
       longValue = $tds.eq(longIndex).text();

    console.log(latValue + ", " + longValue);
});​

Demo: http://jsfiddle.net/mjaVp/