如何獲取特定元素

我從設計師將下面的代碼的索引：如何獲取特定元素

<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元素得到的經度和緯度值id？列的順序可能會稍後更改，因此不能直接編制索引。但id值將保持不變。

來源

2012-03-15 papaiatis

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

來源

2012-03-15 20:59:37 nnnnnn

由於單個'var'聲明，jsfiddle演示並使用'text（）'而不是'html（）'來接受這個解決方案。 – papaiatis 2012-03-15 21:17:21

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

來源

2012-03-15 21:01:29 jfriend00

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

這假定元素的順序是一致的，這看你的代碼是應該的。

來源

2012-03-15 21:04:17 j08691

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（20上更復雜的頁面）至少快8倍;）

來源

2012-03-15 21:05:06

+1，但我個人會將'row.children'更改爲'row.cells'。 – 2012-03-15 21:11:55

知道我忘記了一些東西。當然，如果HTML是完美的，那麼這兩個在這裏是同義詞，但是「單元格」更「正確」。 – 2012-03-15 21:13:59

+1原始JavaScript解決方案！ :) – papaiatis 2012-03-15 21:14:21

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

的另一種方式

來源

2012-03-15 21:10:50 epascarello

如何獲取特定元素

回答

相關問題