Как найти элемент относительно нажатого элемента

На чтение 2 мин Опубликовано 15.09.2024

Я пытаюсь использовать Hyperscript, чтобы найти ближайший родительский элемент с классом .foo, когда пользователь кликает на любой элемент внутри <div>. Вот что у меня есть на данный момент:

<div _="on click log target's closest .foo">
  <details class="foo"><summary>AAA</summary>aaa</details>
  <details class="foo"><summary>BBB</summary>bbb</details>
</div>

Мои другие неудачные попытки:

_ = "on click log target's closest .foo"
_ = "on click log target's closest <details/>"
_ = "on click log the closest .foo from target"
_ = "on click log the closest .foo to the target"

Как я могу правильно найти и записать ближайший элемент-родитель .foo относительно нажимого элемента, используя Hyperscript?

Вы можете попробовать следующее решение:

<div _="on click log target.closest('.foo')">
  <details class="foo"><summary>AAA</summary>aaa</details>
  <details class="foo"><summary>BBB</summary>bbb</details>
</div>

target.closest(‘.foo’) использует метод closest() JavaScript, чтобы найти ближайший элемент-родитель с классом .foo относительно нажимого элемента.

Ответ

Чтобы найти ближайший родительский элемент с классом .foo относительно элемента, на который кликнул пользователь, вы можете использовать следующий код на языке Hyperscript:

<div _="on click log target.closest('.foo')">
  <details class="foo"><summary>AAA</summary>aaa</details>
  <details class="foo"><summary>BBB</summary>bbb</details>
</div>

В этом примере мы используем target.closest('.foo'), который применяет метод JavaScript closest(). Этот метод ищет ближайший родительский элемент (или сам элемент), который соответствует указанному селектору. В данном случае, .foo используется как селектор, чтобы найти предполагаемый элемент.

Таким образом, когда пользователь кликает на любой элемент внутри <div>, Hyperscript попытается найти ближайший элемент с классом .foo, начиная с самого элемента, на который кликнули, и поднимаясь вверх по иерархии элементов. Как только такой элемент найден, его информация будет выведена в лог.

Это должно полностью решить вашу задачу. Если у вас возникнут дополнительные вопросы или трудности, не стесняйтесь спрашивать!