jQuery

Question

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

示例：

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

我正在使用 jquery 并且我正在尝试编写一个函数来更新当前所有 table，但是我在尝试更改 [=] 时遇到上下文问题21=]第th个元素。

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

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

Answer 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 + ")");
});

jQuery - 在链中使用上下文？

jQuery - using context in chain?

dom

html-table

jquery-selectors