javascript - 如何获取特定元素的索引

Question

我从设计师那里得到了以下代码:

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

使用 jQuery，如何通过考虑具有指定 id 的第 th 元素来获取经度和纬度值？列的顺序稍后可​​能会改变，因此直接索引不是一个选项。但是 id 值将保持不变。

Answer 1

var latIndex = document.getElementById('latitude').cellIndex;
var longIndex = document.getElementById('longitude').cellIndex;
var row = document.querySelector(".items .odd");
var latitude = row.cells[latIndex];
var longiture = row.cells[longIndex];
latitude = latitude.textContent || latitude.innerText;
longitude = longitude.textContent || longitude.innerText;

仅使用原始 JavaScript，保证比 jQuery 快至少 8 倍(在更复杂的页面上为 20 倍);)