如何使用jQuery过滤器选择器查找表标记td值

问题描述 投票:3回答:3
<table>
    <tr>
        <td>Calories </td>
        <td>TargetValue1</td>
    </tr>
    <tr>
        <td>Protein</td>
        <td>TargetValue2</td>
    </tr> 
    <tr>
        <td>Protein</td>
        <td>TargetValue3</td>
    </tr> 

如何选择所有第二个td值?

我试过了

    $.each($("#nutritab tbody tr td:eq(1)"),function(i , item){
        alert($(item).text());  
    });

但这只返回第一个值。

javascript jquery html
3个回答
3
投票

使用nth-child选择器而不是:eq(index)

:nth-child(n)选择器匹配nth child()Index starts from 1)的每个元素

:eq(index)选择器选择匹配集内索引n处的元素。(Zero-based index

$.each($("#nutritab tr td:nth-child(2)"), function(i, item) {
  alert($(item).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='nutritab'>
  <tr>
    <td>Calories</td>
    <td>TargetValue1</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>TargetValue2</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>TargetValue3</td>
  </tr>
</table>

1
投票

$.each($("#nutritab tbody tr"), function(i, item) {
  alert($(this).find('td:nth-child(2)').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='nutritab'>
  <tr>
    <td>Calories</td>
    <td>TargetValue1</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>TargetValue2</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>TargetValue3</td>
  </tr>
  1. 首先将id命名为表
  2. 使用.nth-child()注意:从1开始

1
投票

你可以使用:nth-child(n)选择器,它匹配nth child() of selector的每个元素:

$('.tb').each(function(index, tr) {
	alert($(this).find('td:nth-child(2)').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tb">
  <tr>
        <td>Calories </td>
        <td>TargetValue1</td>
    </tr>
    <tr>
        <td>Protein</td>
        <td>TargetValue2</td>
    </tr> 
    <tr>
        <td>Protein</td>
        <td>TargetValue3</td>
    </tr> 
</table>
© www.soinside.com 2019 - 2024. All rights reserved.