使用jQuery高效筛选表格TR元素：解决方法详解
本文探讨如何利用jQuery高效筛选HTML表格中符合特定条件的TR元素。 我们将解决以下问题：从一个包含多个TR元素的表格中，筛选出位于包含四个TD元素的TR元素之后，自身仅包含两个TD元素，且在下一个包含四个TD元素的TR元素之前的TR元素。
方法一：利用nextUntil()方法
jQuery的nextUntil()方法非常适合此场景。其语法为：nextUntil(selector, filter)，其中selector指定停止筛选的元素选择器，filter指定要筛选的元素选择器。
以下代码演示如何使用nextUntil()方法：
const tr4Elements = $("tr:has(td:eq(3))"); // 查找包含至少4个TD元素的TR元素 (优化选择器)
tr4Elements.each(function() {
const $this = $(this);
const filteredTrs = $this.nextUntil("tr:has(td:eq(3))", "tr:has(td:eq(1))"); // 筛选符合条件的TR元素 (优化选择器)
filteredTrs.each(function() {
// 对筛选出的TR元素执行操作，例如：
$(this).css("background-color", "yellow"); // 改变背景颜色
// 或获取文本内容：console.log($(this).text());
});
});
方法二：使用next()方法迭代
另一种方法是使用next()方法迭代遍历TR元素，并使用条件语句判断是否符合条件：
const tr4Elements = $("tr:has(td:eq(3))"); // 查找包含至少4个TD元素的TR元素 (优化选择器)
tr4Elements.each(function() {
let $nextTr = $(this).next();
while ($nextTr.length > 0) {
const tdCount = $nextTr.find("td").length;
if (tdCount === 2) {
// 对符合条件的TR元素执行操作
$nextTr.css("background-color", "lightblue"); // 改变背景颜色
// 或获取文本内容：console.log($nextTr.text());
} else if (tdCount >= 4) {
break; // 停止迭代
}
$nextTr = $nextTr.next();
}
});
选择器优化: 以上代码对选择器进行了优化，使用tr:has(td:eq(3))更精确地查找包含至少4个TD元素的TR，避免了不必要的遍历。同样，tr:has(td:eq(1))更精确地找到包含至少2个TD元素的TR。
两种方法都能达到筛选目的，选择哪种方法取决于个人偏好和代码可读性要求。 nextUntil()方法更简洁，而next()方法更易于理解和调试。 选择最适合你项目和编码风格的方法。
