jQuery无法选中元素：选择tool-button类按钮返回长度为0如何解决

原有选择器的错误原因 #

• 混淆了标签选择器和类选择器规则：div是标签名，不需要加前缀.，加.会被识别为选择类名为div的元素，和目标元素匹配逻辑不符
• 误用后代选择器：同一元素的多个类名需要连续书写，类名之间加空格会被识别为「查找前一个选择器匹配元素的后代节点」，你的原有写法会变成查找类为div的元素后代中类为tool-button的元素，再查找其后代中类为refresh-button的元素下的icon-tool-button标签，完全不符合实际DOM结构
• 遗漏类名前缀：icon-tool-button是类名，没有加前缀.，会被识别为标签名选择器，无法匹配到对应元素

正确实现方案 #

正确的选择器写法 #

// 写法1：指定标签+多类名匹配，精准度更高
console.log($('div.tool-button.refresh-button.icon-tool-button').length)
// 写法2：仅用多类名匹配，适合该类组合页面唯一的场景
console.log($('.tool-button.refresh-button.icon-tool-button').length)
// 需要匹配第一个时添加:first即可
console.log($('div.tool-button.refresh-button.icon-tool-button:first').length)

特殊场景适配 #

如果修改选择器后仍然匹配不到元素，按以下两种场景处理：

1. 代码执行时机早于DOM渲染：将DOM操作逻辑放到DOM加载完成的回调中

$(function() {
  // 所有DOM查询、事件绑定逻辑放到该回调内
  $('div.tool-button.refresh-button.icon-tool-button').on('click', function() {
    // 点击触发的业务逻辑
  })
})

2. 按钮为动态生成元素：使用事件委托绑定点击事件，绑定到页面初始加载时就存在的父级元素上即可

// 代码中的parent替换为按钮的实际父级选择器，找不到固定父级可写document.body兜底
$('parent').on('click', 'div.tool-button.refresh-button.icon-tool-button', function() {
  // 点击触发的业务逻辑
})

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