我的代码有什么问题，尝试获取第一个元素文本jquery？

Question

看我的代码，我想使它像这样，当用户单击表tr时，我将获得第一个td文本，因此jquery我先使用first（）然后使用text（），但它会回显出td 1和td苹果。 我只想获取第一个td文本，我做错了什么？ 欣赏。

 var gridtable = $('.gridtable'); gridtable.click(function(){ var name = $(this).first().text(); alert('name'); }) 

  <tr class="gridtable"> <td>1</td> <td >apple</td> </tr> <tr class="gridtable"> <td>2</td> <td >banana</td> </tr> 

Answer 1

在处理程序内部， this是指单击的tr应用first()方法将检索相同的tr本身。 相反，您需要过滤掉嵌套的td元素。 您可以使用:first伪类选择器获取第一个元素。

var gridtable = $('.gridtable:first');
gridtable.click(function(){
    // get the first element within the context
    var name = $('td:first', this).text();
    alert(name);
});

---

 var gridtable = $('.gridtable'); gridtable.click(function() { var name = $('td:first',this).text(); alert(name); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="gridtable"> <td>1</td> <td>apple</td> </tr> <tr class="gridtable"> <td>2</td> <td>banana</td> </tr> </table> 

Answer 2

var gridtable = $('.gridtable');

gridtable.click(function(){
        var name = $(this).find('td:first').text();
        alert(name);
  });

Answer 3

由于要在tr级别附加点击处理程序，因此需要使用find函数选择tr内的所有tds，然后选择第一个td：

var name = $(this).find('td').first().text();

Answer 4

var gridtable指的是您的tr元素，因此当提高$element.click时， gridtable.first()将使用类.gridtable定位第一个元素。

您可以使用.gridtable.children()获取gridtable的子级，然后使用gridtable .first()

请看以下示例： https : //jsfiddle.net/gnc9t1p2/1/

编辑1-

正如@JaromandaX所说，您应该使用var name = $(this)...来获得被点击的行。

Answer 5

我认为下面的代码将对您有所帮助，它对我有用。

 var gridtable = $('.gridtable');
       gridtable.click(function(){
       var name = $(this).find("td:first").text();// for only first td
                              or 
       var name =   $(this).find("td:eq(0)").text();// you can change index number like  eq(0) ,eq(1) for nect td
                alert(name);
      })