如何获取特定元素的索引

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

Answer 2

您可以使用.index()方法获取纬度和经度标头的位置，然后在正文中获取相同的位置。

// get column number for lat and long
var latIndex = $("#latitude").index();
var longIndex = $("#longitude").index(); 

// get rows that contain the actual data
var rows = $(".items .odd td");

// get the desired data from the same columns as titles
var latitude = rows.eq(latIndex).text();
var longitude = rows.eq(longIndex).text();

此处的演示： http : //jsfiddle.net/jfriend00/bCXbw/

Answer 3

您可以使用.index()方法 ：

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

演示： http ： //jsfiddle.net/mjaVp/

Answer 4

使用index（）和：nth-​​child（）的另一种方式

var lat = jQuery("#latitude");
var lng = jQuery("#longitude");

var latInd = jQuery("table thead th").index( lat ) + 1;
var lngInd = jQuery("table thead th").index( lng ) + 1;

var lats = jQuery("table tbody tr td:nth-child(" + latInd + ")");
var lngs = jQuery("table tbody tr td:nth-child(" + lngInd  + ")");

console.log(lats);
console.log(lngs);

小提琴

Answer 5

var lat = $('#latitude').index();
var long = $('#longitude').index();
console.log($('tr.odd td:eq('+lat+')').html()); //outputs 40.9891
console.log($('tr.odd td:eq('+long+')').html()) // outputs -75.1962

这假定元素的顺序是一致的，即您的代码应该是一致的。