如何获取特定元素的索引

How to get the index of a particular element

本文关键字：元素 索引 何获取 获取      更新时间：2023-09-26

我从设计者那里得到了以下代码：

<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值将保持不变。

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

您可以使用.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/

您可以使用.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/

index（）与以下一起使用的另一种方法

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

小提琴

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

这假设元素的顺序是一致的，从你的代码来看，它应该是一致的。

相关文章：