使用jQuery将页面中3的倍数标记为红色的代码问题咨询

原代码存在的问题 #

• find()用法错误：find()用于查找子元素，参数应为选择器/元素，不能直接传回调函数，筛选元素要使用filter()方法
• 错误调用val()：<table>及表格单元格没有val()方法，获取内容需用text()或html()
• 链式调用语法错误：.css()前的点号不能单独换行，必须紧跟在前一个方法调用的末尾
• 逻辑不符合需求：需求是标记3的倍数数字，但代码给数字加1后再判断，偏离了需求

正确实现示例 #

假设页面表格结构如下：

<table id="Q2_1">
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
</table>

对应的jQuery代码：

$(function(){
  // 选中目标表格下的所有单元格，筛选出内容为3的倍数的元素并设置红色
  $("#Q2_1 td").filter(function(){
    var num = parseInt($(this).text().trim(), 10);
    // 验证是有效数字且为3的倍数
    return !isNaN(num) && num % 3 === 0;
  }).css("color", "#f00");
});

代码说明 #

• $("#Q2_1 td")精准选中目标表格内的所有单元格
• filter()方法通过回调函数逐个校验单元格内容，保留符合条件的元素
• text().trim()获取单元格文本并去除多余空格，转成整数后判断是否为3的倍数
• 最后通过链式调用给筛选出的元素设置红色字体

内容的提问来源于stack exchange，提问作者soojung