如何使用htmltools::tagQuery选择多class的div标签？

问题原因 #

你之前的代码失效是因为CSS选择器语法错误：当元素拥有多个class时，用空格分隔class会被解析为“后代元素”关系，而非“同一个元素同时具备这些class”。另外，无需写出所有class，只要目标元素包含sw-input-icon，单个class选择器就足够定位。

正确代码示例 #

library(htmltools)
library(shinyWidgets)

# 生成numericInputIcon控件
objct <- numericInputIcon("test", NULL, 5, icon = "Select:")

# 正确定位并修改样式
tagQuery(objct)$
  find("div.sw-input-icon")$  # 仅用目标class定位，无需写全所有class
  addAttrs(style = "width: 75px")$
  allTags()

核心要点 #

• 单个class即可定位：只要目标div包含sw-input-icon类，div.sw-input-icon就能精准匹配，不需要列出元素的所有class。
• 多class精确匹配写法：如果需要限定元素同时具备多个class，选择器格式为div.class1.class2.class3（class之间用.连接，无空格），例如div.input-group-prepend.sw-input-icon。
• 验证DOM结构：若仍无法定位，可先查看控件生成的HTML结构确认目标元素位置：

  # 在浏览器中打开生成的HTML
  print(objct, browse = TRUE)
  

关于临时方法的说明 #

你手动用withTags构建的标签结构和numericInputIcon生成的结构一致，之所以能生效，是因为你避开了选择器语法错误，而非手动构建标签本身有特殊作用。

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