如何使用jQuery获取第一个元素的文本

Question

我正在尝试获取所点击的td元素所在的父tr中的第一个span中的文字。

我认为以下内容可行，但它会返回给定td的所有tr元素中的文本。如果不执行$t.closest('tr').find('td').eq(0).text()之类的操作，我该怎么做？

http://jsfiddle.net/9dh7pz73/3/

$("table span").click(function(){
    var $t=$(this);
    console.log($t.closest('tr'),$t.closest('tr').first('td').text());
});

<table>
    <tr>
        <td>a</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
    <tr>
        <td>b</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
    <tr>
        <td>c</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
</table>

Answer 1

first()方法不接受选择器。相反，你可以这样做find('td:first')：

$("table span").click(function(){
    var $t = $(this);
    console.log($t.closest('tr').find('td:first').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>a</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
    <tr>
        <td>b</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
    <tr>
        <td>c</td>
        <td>0</td>
        <td><span>xxx</span></td>
    </tr>
</table>

Answer 2

如果要在单击特定范围时定位第一个<td>元素，您可以连接事件处理程序以获取点击，然后通过{{找到第一个<td> 1}}选择器：

td:first

示例

$('table span').click(function(){
    // This will find the closest <tr> and then the first <td> element that appears within
    console.log($(this).closest('tr').find('td:first').text());  
});

$('table span').click(function() {
  console.log($(this).closest('tr').find('td:first').text());
});