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，如何通过考虑具有指定th的{{1}}元素来获取经度和纬度值？列的顺序可能会稍后更改，因此不能选择直接索引。但是，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() 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);
});

演示：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);

fiddle

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

这假设元素的排序是一致的，它应该查看你的代码。

如何获取特定元素的索引

5 个答案: