jQuery中无class或id属性时如何从按钮组定位目标按钮

完全不需要依赖元素的id、class属性，仅靠jQuery提供的选择器、DOM遍历方法，结合元素本身的位置、属性、层级、内容特征，就能从一组按钮里精准定位到目标。

示例参考DOM结构 #

<body>
  <button>Click Me</button>
  <button>Click Me</button>
  <button class="food">Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>
  <input type="text">
  <!--
     <script src="ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="index.js"></script>
  -->
</body>

注：以下定位方法都不会用到元素的id、class属性做筛选条件

常用实现方式 #

• 按索引位置定位
  所有jQuery选择器返回的集合都是按DOM从上到下的顺序排列的，索引从0开始，用eq()方法就能直接取指定位置的按钮。比如要定位上面代码里的第3个按钮，直接取索引为2的元素即可：

  // 选中所有button元素后，取第3个（索引从0开始计数）
  const $target = $('button').eq(2)
  

  也可以直接用位置类筛选伪类简化写法：$('button:first')选第一个按钮、$('button:last')选最后一个按钮、$('button:even')选偶数位按钮、$('button:odd')选奇数位按钮。
• 按DOM层级关系定位
  通过元素和周边已知元素的父子、兄弟关系做遍历定位，不需要任何标识属性。比如要选上面代码里输入框前面紧邻的那个按钮，直接从input元素往前找相邻兄弟节点即可：

  // 先找到input输入框，再找它前面紧邻的button元素
  const $prevBtn = $('input').prev('button')
  

  同类的遍历方法还有next()找后一个相邻元素、parent()找父元素、children()找子元素、siblings()找所有同级元素，所有方法都支持传筛选条件缩小匹配范围。
• 按元素原生属性/内容定位
  如果按钮有自带的原生属性（比如disabled、type="submit"、name属性等），或者按钮内的文本有区分度，可以直接用属性选择器、内容选择器定位：

  // 1. 选带disabled禁用属性的按钮
  const $disabledBtn = $('button[disabled]')
  // 2. 选内部文本包含"提交"的按钮
  const $submitBtn = $('button:contains("提交")')
  // 3. 选name属性为confirm的按钮
  const $confirmBtn = $('button[name="confirm"]')
  

• 按排除法定位
  如果已知非目标按钮的共同特征，可以用not()方法把非目标元素全部排除，剩下的就是目标元素：

  // 排除所有带disabled属性的按钮，剩下的就是目标按钮
  const $target = $('button').not('[disabled]')
  

实际开发中可以把以上方法组合使用，比如$('div').eq(0).find('button').last()，只要顺着DOM结构找，不需要给元素加id、class也能实现精准定位。

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