Как найти класс тега с помощью htmltools::tagQuery с несколькими классами?

Вопрос или проблема

library(htmltools)
library(shinyWidgets)

# <div class="form-group shiny-input-container">
#   <label class="control-label shiny-label-null" for="test" id="test-label"></label>
#     <div class="input-group">
#       <div class="input-group-addon sw-input-icon input-group-prepend">
#         <span class="input-group-text">Выбрать:</span>
#           </div>
#           <input id="test" type="number" class="form-control numeric-input-icon" value="5"/>
#             </div>
#             <span class="help-block invalid-feedback hidden d-none"></span>
#               </div>

objct <-  numericInputIcon("test", NULL, 5, icon = "Выбрать:")

tagQuery(objct)$
  find("div.input-group")

# Не возвращает ничего
tagQuery(objct)$
find("div.input-group-addon sw-input-icon input-group-prepend")

# Не возвращает ничего
tagQuery(objct)$
  find("div.sw-input-icon")

.

Ответ или решение

Для успешного поиска элемента с несколькими классами в R с помощью функции tagQuery из пакета htmltools необходимо знать некоторые нюансы работы с CSS-селекторами. В вашем случае вы пытаетесь найти div с классом sw-input-icon, но сталкиваетесь с проблемой, так как в HTML-коде этот тег обладает несколькими классами.

Проблема и её решение

Когда вы используете tagQuery для поиска элемента, который имеет несколько классов, его нужно указать корректно. CSS-селекторы требуют, чтобы классы, разделенные пробелом, были объединены в один селектор, с использованием точек между ними, а не пробелов.

Пример использования

Исходя из вашего кода, вы создаете объект objct с помощью функции numericInputIcon, и затем пытаетесь извлечь div с помощью tagQuery. Давайте рассмотрим, как это сделать правильно:

library(htmltools)
library(shinyWidgets)

# Создание объекта
objct <- numericInputIcon("test", NULL, 5, icon = "Select:")

# Поиск элемента с классом sw-input-icon
result <- tagQuery(objct)$find("div.sw-input-icon")

# Проверяем результаты
print(result)

Обратите внимание на то, что в случае с несколькими классами, вы должны использовать точку между классами и указать все нужные классы. В вашем случае это будет div.sw-input-icon.input-group-addon.input-group-prepend. Таким образом, правильный селектор будет выглядеть так:

result <- tagQuery(objct)$find("div.sw-input-icon.input-group-addon.input-group-prepend")

Дополнительные советы

1. Проверка вывода: Если поиск элемента не срабатывает, вы можете использовать html_print для визуализации HTML-кода вашего объекта и проверки структуры перед тем, как выполнять поиск.

html_print(objct)

2. Отладка CSS-селекторов: Убедитесь, что элементы действительно существуют в HTML. Иногда динамические элементы могут не отображаться сразу, если они загружаются через JavaScript.

3. Использование классов релевантным образом: Поскольку классы в CSS являются многократно используемыми, выбирайте искомый элемент максимально специфично, чтобы избежать конфликтов.

Заключение

Правильный выбор селектора является ключевым моментом в нахождении элементов с помощью tagQuery. Будьте внимательны к тому, как вы указываете классы, и всегда проверяйте вывод HTML-кода для отладки. Это обеспечит вам эффективный поиск необходимых элементов в ваших проектах на R и Shiny.