2012-03-15 5 views
2

特定の要素のインデックスを取得する方法:私は指定されたアカウントにth要素を取ることによって、経度と緯度の値を得ることができる方法私はデザイナーから次のコードを持って

<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?列の順序は後で変更される可能性がありますので、直接インデックスはオプションではありません。ただし、idの値は変わりません。あなたは、緯度と経度のヘッダの位置を取得する.index()方法を使用し、体内の同じ位置を得ることができhttp://jsfiddle.net/mjaVp/

答えて

1

あなたが.index() methodを使用することができます。ここ

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

+0

私はこの単一の 'var'宣言、jsfiddleデモ、' html() 'の代わりに' text() 'を使用してこの解決策を受け入れます – papaiatis

2

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

デモ:

0
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 

これは、それがあるべきあなたのコードを見て、要素の順序が一致していることを前提としています。

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

jQueryの(より複雑なページ20)よりも少なくとも8倍高速であることが保証ONLY生のJavaScriptを使用して;)

+0

+1、私は個人的に 'row.children'を' row.cells'に変更したいと思います。 –

+1

私は何かを忘れていたことを知っていた。もちろん、HTMLが完璧でない場合は、2つの同義語は同義ですが、「セル」は「より正確」です。 –

+0

生のjavascriptソリューションの+1! :) – papaiatis

1

: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

index()を使用して別の方法
関連する問題