jQuery父級或父級在表th標簽中獲取數據屬性

Question

我有一張表格，它像一個網格，頂部有一個水平列表，在th標簽內有周數，在每個周下面的tr和td標簽行中有不同的值。

我試圖讓data-attribute的week ，當我在一個點擊以下td與標簽data-id attribute 。 但是我無法正確理解並想知道我做錯了什么才能讀取此值？

我測試過的一些組合：

var test = $(this).closest("th").attr("data-week");
var test = $(this).parents().find(".week").attr("data-week");
var test = $(this).parents("th").attr("data-week");

帶有數據屬性的HTML表格：

 <table>
        <thead>
            <tr>
                <th class=""></th>
                    <th class="week" data-week="15">15</th>
                    <th class="week" data-week="16">16</th>
                    <th class="week" data-week="17">17</th>
                    <th class="week" data-week="18">18</th>
                    <th class="week" data-week="19">19</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>Stina (1)</td>
                            <td data-id="40">10</td>
                            <td data-id="12">20</td>
                            <td data-id="13">40</td>
                            <td data-id="14">45</td>
                            <td data-id="15">40</td>
                </tr>
                <tr>
                    <td>Linda (2)</td>
                            <td data-id="0">0</td>
                            <td data-id="0">0</td>
                </tr>
                <tr>
                    <td>Lasse (3)</td>
                            <td data-id="21">5</td>
                            <td data-id="22">39</td>
                            <td data-id="23">40</td>
                            <td data-id="24">40</td>                       
                </tr>
        </tbody>
</table>

Answer 1

@Sean DiSanti，好人！ 這是一個效率更高的版本，使用eq方法不會使$ in $變形

$('td').on('click', function(e) {
  var index = $(this).index() -1;
  var week = $('.week').eq(index).data('week');
  console.log('week', week);
});

的jsfiddle

Answer 2

您可以通過以下方式找到被點擊的元素的數據周屬性。

$(document).ready(function(){
     $("td").on("click",function(){
         $td=$(this);
         $th = $td.closest('table').find('th').eq($td.index());
         alert($th.attr("data-week"));
     });    
});

演示 ： https : //jsfiddle.net/7b146hor/2/

Answer 3

您需要按索引找到它。 獲取被單擊元素具有的子編號，然后在.weeks查找相同的編號

演示

$('td').on('click', function(e){
  index = $(this).index();
  week  = $('.weeks').find(":eq("+index+")").attr('data-week');
  console.log(week);
});

Answer 4

這對我有用

$('td').on('click', function(e) {
  index = $(this).index();
  week = $($('.week')[index - 1]).data('week');
  console.log('week', week);
});

jsfiddle示例