jquery - 如何从类名中读取值

Question

我有下表:

<table>
    <thead> 
        <tr>
            <th class="tTle">Mon</td>
            <th class="tTle">Tues</td>
            <th class="tTle">Wed</td>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="monday"/>
            </td>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="tuesday"/>
            </td>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="wednesday"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="monday"/>
            </td>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="tuesday"/>
            </td>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="wednesday"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="monday"/>
            </td>>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="tuesday"/>
            </td>
            <td>
                <input type="text" class = "Val1"/>
                <input type="text" class = "Val2"/>
                <input type="button" class = "but" val="wednesday"/>
            </td>
        </tr>
    </tbody>
</table>

我想在点击 but 时读取 tTle 各自的 thead 值？我怎样才能做到这一点？

$(function ()
    {
        
         $(".but").click(readTitle);      
            
  
        });
});

Answer 1

如果我理解得很好，如果单击一个按钮，您需要获取该按钮位于哪一列，并确定该列的 thead 标题。我的小片段就是这样做的:

$('.but').click(function () {
  var $me=$(this);
  var place=$('td', $me.closest('tr')).index($me.closest('td'));

  var text=$('thead .tTle').eq(place).text();
});

在place中，将存储按钮父级td从0开始的位置。这可以使用 .index() 获取，它在相应 tr 中的一组 td 上执行，并获取 td 在其中的位置。

当我们有了索引后，就可以使用 .eq() 轻松找到我们要查找的 .tTle .

编辑:以及 promise 的 jsFiddle 。它似乎工作得很好，尽管OP在这个答案下面的评论中指出它必须改变。可能存在一些标记问题。