本文详解如何在 jQuery 中安全、高效地将数字 ID 转换为合法选择器并操作对应 DOM 元素，重点纠正 $(number).toString() 的误用，提供可复用的循环遍历与条件样式处理方案。
本文详解如何在 jquery 中安全、高效地将数字 id 转换为合法选择器并操作对应 dom 元素，重点纠正 `$(number).tostring()` 的误用，提供可复用的循环遍历与条件样式处理方案。
在使用 jQuery 动态操作具有数字 ID（如 id="9"、id="10"）的元素时，一个常见误区是：误将整数直接传入 $() 构造函数，或错误调用 .toString() 将 jQuery 对象转为字符串后再试图执行 DOM 操作。例如原代码中：
var hour9 = $("#9").attr("id"); // → "9"（字符串）
var hour9N = parseInt(hour9); // → 9（整数）
// ...
var color = $(hourArray[i]).toString(); // ❌ 错误！$(9) 无效，且 toString() 返回 "[object Object]"
color.removeClass("row time-block"); // ❌ 报错：Uncaught Error: unrecognized expression: [object Object]该写法失败的根本原因有二：
- $(9) 是非法选择器 —— jQuery 无法识别纯数字作为选择器；
- .toString() 作用于 jQuery 对象时返回固定字符串 "[object Object]"，而非你期望的 "#9"。
✅ 正确做法是：将整数 ID 拼接成标准 ID 选择器字符串 '#' + id，再传入 $()：
var hourArray = [9, 10, 11, 12, 13, 14, 15, 16, 17];
var currentHour = new Date().getHours(); // 假设获取当前小时（24小时制）
for (var i = 0; i < hourArray.length; i++) {
var idNum = hourArray[i];
var $element = $('#' + idNum); // ✅ 正确构造选择器：$('#9'), $('#10')...
if ($element.length === 0) continue; // 安全检查：确保元素存在
if (idNum === currentHour) {
$element.removeClass("row time-block").addClass("current-hour");
} else if (idNum < currentHour) {
$element.addClass("past").removeClass("future");
} else {
$element.addClass("future").removeClass("past");
}
}? 进阶优化建议：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
避免重复创建 jQuery 对象：上述循环中每次 $('#' + idNum) 都是一次 DOM 查询。若需高频操作，可预先缓存所有目标元素：
var $timeBlocks = $('#9, #10, #11, #12, #13, #14, #15, #16, #17'); $timeBlocks.each(function() { var idNum = parseInt(this.id, 10); // 后续逻辑同上... }); -
使用数据属性替代纯数字 ID（更语义化、防冲突）：
<div id="block-9" data-hour="9"></div>
对应 JS：
$('[data-hour]').each(function() { var hour = parseInt($(this).data('hour'), 10); // 统一处理逻辑 });
⚠️ 注意事项：
- HTML ID 必须唯一且以字母开头（虽然 id="9" 在现代浏览器中可工作，但不符合 HTML 规范，建议改用 id="hour-9"）；
- 使用 parseInt(str, 10) 显式指定十进制，避免意外的八进制解析；
- 始终检查 $(selector).length > 0 再执行操作，防止静默失败。
掌握 '#' + id 这一核心模式，即可安全、清晰地实现基于动态 ID 的批量 DOM 操作。
