Question

我是jQuery的新手，也许我说这一切都错了......

我需要选择每个tr的第n个td，对其进行一些数学运算（将值除以60）并将新值返回到td。

$('#table tbody').find('tr td:eq(2)').text($(this).text() / 60);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>John</td>
      <td>2</td>
      <td>800</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Sally</td>
      <td>5</td>
      <td>610</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>7</td>
      <td>249</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

jquery docs give examples以这种方式操纵css，所以看起来我也可以通过.text（）来做到这一点。

控制台没有返回任何错误，之后也执行了console.log所以我知道它仍在继续，但DOM中没有任何值发生变化。

我应该使用.each（）而不是.find（）吗？任何帮助表示赞赏。

Answer 1

您需要使用$('#table tbody').find('tr td:nth-child(2)').text(function(i, oldtext) return parseInt(oldtext)/60; });的函数参数。调用该函数时，将旧文本值作为参数，返回值将替换它。

$(this).text()/60

如果您不使用某个功能，则在调用text()之前执行 this，因此它会使用调用上下文中的:nth-child。< / p>

您还需要使用:eq而不是find -H . -maxdepth 1 -type f来访问每行中的第三个单元格。否则，它只访问整个结果集中的第三个单元格。

Answer 2

您的代码几乎是正确的，但您需要在匿名函数中向text()提供逻辑，以便对所有匹配的td元素执行它。

另请注意，您可以使用单个:nth-child选择器获取每行中的td，而无需使用find() - 尽管索引是3，而不是2，nth-child使用从1开始的索引。试试这个：

＆＃13;

$('table tbody tr td:nth-child(3)').text(function(i, t) {
  return parseInt(t, 10) / 60;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>John</td>
      <td>2</td>
      <td>800</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Sally</td>
      <td>5</td>
      <td>610</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>7</td>
      <td>249</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

＆＃13;

请注意，如果需要，您可以使用toFixed()将结果设置为给定的小数位数。

Answer 3

@Rory和@Barmar有很好的答案，是我用于上述实现的答案，但我注意到一些可能对将来的jQuery开发工作有帮助的事情。首先，我没有在代码中看到带有'table'值的ID，因此jQuery找不到任何tds，因为它找不到id ='table'。其次，上面的find函数的工作方式只能找到跟在所有trs之后的第三个td。如果你想从所有trs的列表中获得位置2中的所有tds，那么你需要设置数组来查找每组trs，如下所示：$('table body tr')然后使用tds上的find。最后，如果您想使用每个语句，您可以执行以下操作：

var els = $('table tbody tr').find('td:eq(2)');
$.each(els, function(index,value){
    var thisNum = parseInt($(value).text());
    $(value).text(thisNum / 60);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>John</td>
      <td>2</td>
      <td>800</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Sally</td>
      <td>5</td>
      <td>610</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>7</td>
      <td>249</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

如何操作jQuery返回的元素上的文本？

3 个答案: