jQuery选择器问题：如何定位指定data-id下的目标按钮

你用的.shepherd-step[data-id="DataType"] > .shepherd-button-example-primary是直接子元素选择器，它仅会匹配目标div的直接子节点按钮。如果按钮实际嵌套在目标div内部的其他元素（比如嵌套的div、span容器）里，这个选择器就会失效。

正确的选择器写法 #

把直接子选择器>换成后代选择器（空格），这样就能匹配目标div下所有层级的目标按钮：

$('.shepherd-step[data-id="DataType"] .shepherd-button-example-primary')

或者使用jQuery的find()方法，效果和上述后代选择器完全一致：

$('.shepherd-step[data-id="DataType"]').find('.shepherd-button-example-primary')

验证排查步骤 #

1. 先确认父容器是否能被正确选中：

console.log($('.shepherd-step[data-id="DataType"]').length)

如果输出数值大于0，说明父元素选择逻辑没问题。
2. 检查按钮是否确实处于该父容器的后代节点中（而非直接子节点），通过浏览器开发者工具查看DOM结构即可确认。

内容的提问来源于stack exchange，提问作者Enrico Stöbe