jQuery - 在链中使用上下文？

Posted 2023-03-05

【中文标题】jQuery - 在链中使用上下文？

【英文标题】：jQuery - using context in chain?

【发布时间】：2020-11-15 01:07:17

【问题描述】：

我有一个包含多个表的页面，我想将每个表的行数包含在一个值中。有一个整体表，然后是其他子类别的表。整个表可能会删除一行，这需要更新自身和删除后的子类别。

例子：

Overall table: th 1: Items (50)
Cat 1 table: th 1: Items (20)
Cat 2 table: th 1: Items (30)

我正在使用 jquery，并且正在尝试编写一个仅更新当前所有表的函数，但是在尝试更改第 th 元素的 html 时遇到了上下文问题。

$('table th:nth-child(1)').html("Items (" + $('tbody').children().length + ")");

我正在尝试编写 1 行解决方案，而不是为每个表进行 id 选择的蛮力方法。 我不确定如何将上下文保持在我所在的当前表中，而不是选择所有 tbody 元素。有没有办法可以使用上下文或 $(this) 变量？

【参考方案1】：

这会将所有<th> 元素设置为相同的值（使用.text() 比使用.html() 更好）：

$('table th:nth-child(1)').text("Items (" + $('tbody tr').length + ")");

这使用一个回调函数来计算每个<th>元素的动态文本值：

$('table th:nth-child(1)').text(function () 
    var rowCount = $(this).find('tbody tr').length;
    return "Items (" + rowCount + ")";
);

表达相同操作的另一种方式是使用.each()：

$('table').each(function () 
    var rowCount = $(this).find('tbody tr').length
    $(this).find('th:nth-child(1)').text("Items (" + rowCount + ")");
);

【讨论】：

谢谢！我喜欢最后一个解决方案，对我来说最有意义。

@jeeden 使用 jQuery 的方法总是不止一种。大多数时候我也倾向于使用.each() - 它是最通用的。第二种解决方案可能要快一些（从学术上讲），因为它只进行一次 CSS 搜索。如果您的页面上只有少数表格，净差异可能为零。