jQuery：如何获取特定的元素子集？

Question

我必须在网页上显示一个表格，然后打印出来。该语句检索表行：

var rows = $element.find(".row");

假设这会产生 50 行。现在的要求是：

• 每个打印页应该有 20 行
• 每个打印页面必须显示列标题，在rows[0]和rows[1]

因此，我需要遍历 rows 集合，以便循环为我提供每页正确的子集，如下所示：

var printRows = rows.slice(0, 2) + rows.slice(2, 22); //values for page 1
var printRows = rows.slice(0, 2) + rows.slice(22, 42); //values for page 2
var printRows = rows.slice(0, 2) + rows.slice(42, 52); //values for page 3

我知道如何创建循环。问题是这些行不是有效的 jQuery。如何获取我需要的行子集？

谢谢！

Answer 1

虽然 jQuery 对象并不是真正的数组，但可以像使用数组一样使用它们，既可以使用 slice，也可以使用 ...（扩展）运算符。

这是一个使用slice 和... 获取所需项目的示例。它使用数组，但也适用于包含 DOM 元素的 jQuery 对象。

const pageLength = 20;
const pageCount = 5;
const rows = [];
while (rows.length < pageCount * pageLength - 10) rows.push(rows.length);

for (let page = 1; page <= pageCount; page++) {
  var result = [
    ...rows.slice(0, 2),
    ...rows.slice(2 + (page - 1) * pageLength, 2 + page * pageLength)
  ];
  console.log("Page " + page + ":", result.toString());
}