如何遍历HTML文档查找内嵌特定控件？jQuery实现方法

你当前硬编码DOM层级下标的写法容错率极低，只要网格增删列、调整模板结构就会失效，完全不需要手动逐层遍历DOM，结合ASP.NET Web Form的ID生成规则，用属性选择器就能实现稳定、低维护成本的自动定位。

核心匹配逻辑 #

ASP.NET 服务端控件（包括Telerik RadGrid这类第三方控件）渲染后的客户端ID固定遵循格式：[各级命名容器前缀拼接]_[你在服务端定义的原始控件ID]，也就是说目标ID永远以你设置的原始控件名结尾，且前缀和原始名称之间用下划线分隔。基于这个规则用后缀匹配，比全局模糊包含的准确率高得多，不会误命中名称相似的附属控件。

jQuery 实现（推荐，代码最简洁） #

jQuery原生支持属性后缀选择器，不需要自己写遍历逻辑，直接封装通用函数即可：

/**
 * 按原始服务端ID查找渲染后的DOM元素
 * @param {string} controlBaseName 服务端定义的控件原始ID
 * @param {HTMLElement} [container] 可选，限定查找范围，提升查找效率
 * @returns {jQuery} 匹配到的jQuery元素对象
 */
function FindMyControl(controlBaseName, container) {
    const searchScope = container || document;
    // 匹配ID以"_原始ID"结尾的元素，加下划线是为了避免误命中名称包含目标串的其他控件
    return $(`[id$="_${controlBaseName}"]`, searchScope);
}

// 基础用法：全局查找mycheckbox
const mychk = FindMyControl("mycheckbox");

// 优化用法：限定只在RadGrid范围内查找，避免全局匹配到其他同名控件
const grid = $find("<%=RadGrid1.ClientID %>");
const mychkInGrid = FindMyControl("mycheckbox", grid.get_element());

不要使用[id*="mycheckbox"]这类包含匹配选择器，否则会误命中类似mycheckbox_wrapper、mycheckbox_label这类控件自动生成的附属DOM元素，匹配准确率会大幅下降。

原生JS实现（无jQuery依赖场景） #

如果项目没有引入jQuery，直接用原生选择器API即可，性能比手写递归遍历高很多：

function FindMyControl(controlBaseName, container) {
    const searchScope = container || document;
    // 查找单个匹配元素
    return searchScope.querySelector(`[id$="_${controlBaseName}"]`);
    // 如果需要查找网格所有行内的同名控件（比如每行的勾选框），换成下面的写法
    // return Array.from(searchScope.querySelectorAll(`[id$="_${controlBaseName}"]`));
}

RadGrid场景的额外优化建议 #

• 查找网格行内的重复控件（比如每行的勾选框、按钮）时，不要全局查找，把当前行的DOM对象作为container参数传入，既可以提升查找速度，也不会跨行列错元素
• 如果你的项目基于ASP.NET 4.0及以上版本，对于非列表重复的控件，可以直接给控件设置ClientIDMode="Static"，渲染后的客户端ID会和你写的原始ID完全一致，直接用document.getElementById就能定位，不需要额外匹配。注意这个模式不适合网格、列表这类模板重复生成控件的场景，会出现ID重复的问题，这类场景用上面的后缀匹配方案即可。

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