itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-03 07:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Doc - make it clear that closest can return the element itself #1487 (#1488)

Browse Source
This commit is contained in:
Vincent 2023-06-15 19:48:32 +02:00 committed by GitHub
parent adef1166e2
commit dd53ca0a75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
www/content/attributes/hx-indicator.md
View File

@ -7,7 +7,8 @@ added to it for the duration of the request. This can be used to show spinners o
while the request is in flight. while the request is in flight.
The value of this attribute is a CSS query selector of the element or elements to apply the class to, The value of this attribute is a CSS query selector of the element or elements to apply the class to,
or the keyword `closest`, followed by a CSS selector, which will find the closest matching parent (e.g. `closest tr`); or the keyword [`closest`](https://developer.mozilla.org/docs/Web/API/Element/closest), followed by a CSS selector,
which will find the closest ancestor element or itself, that matches the given CSS selector (e.g. `closest tr`);
Here is an example with a spinner adjacent to the button: Here is an example with a spinner adjacent to the button:

3
www/content/attributes/hx-target.md
View File

@ -7,7 +7,8 @@ request. The value of this attribute can be:
* A CSS query selector of the element to target. * A CSS query selector of the element to target.
* `this` which indicates that the element that the `hx-target` attribute is on is the target. * `this` which indicates that the element that the `hx-target` attribute is on is the target.
* `closest <CSS selector>` which will find the closest parent ancestor that matches the given CSS selector * `closest <CSS selector>` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)
ancestor element or itself, that matches the given CSS selector
(e.g. `closest tr` will target the closest table row to the element). (e.g. `closest tr` will target the closest table row to the element).
* `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector. * `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector.
* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector. * `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector.

2
www/content/attributes/hx-trigger.md
View File

@ -58,7 +58,7 @@ is seen again before the delay completes it is ignored, the element will trigger
* The extended CSS selector here allows for the following non-standard CSS values: * The extended CSS selector here allows for the following non-standard CSS values:
* `document` - listen for events on the document * `document` - listen for events on the document
* `window` - listen for events on the window * `window` - listen for events on the window
* `closest <CSS selector>` - finds the closest parent matching the given css selector * `closest <CSS selector>` - finds the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) ancestor element or itself, matching the given css selector
* `find <CSS selector>` - finds the closest child matching the given css selector * `find <CSS selector>` - finds the closest child matching the given css selector
* `target:<CSS selector>` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for * `target:<CSS selector>` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for
triggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body, triggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body,

3
www/content/docs.md
View File

@ -392,7 +392,8 @@ input tag.
`hx-target`, and most attributes that take a CSS selector, support an "extended" CSS syntax: `hx-target`, and most attributes that take a CSS selector, support an "extended" CSS syntax:
* You can use the `this` keyword, which indicates that the element that the `hx-target` attribute is on is the target * You can use the `this` keyword, which indicates that the element that the `hx-target` attribute is on is the target
* The `closest <CSS selector>` syntax will find the closest parent ancestor that matches the given CSS selector. * The `closest <CSS selector>` syntax will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)
ancestor element or itself, that matches the given CSS selector.
(e.g. `closest tr` will target the closest table row to the element) (e.g. `closest tr` will target the closest table row to the element)
* The `next <CSS selector>` syntax will find the next element in the DOM matching the given CSS selector. * The `next <CSS selector>` syntax will find the next element in the DOM matching the given CSS selector.
* The `previous <CSS selector>` syntax will find the previous element in the DOM the given CSS selector. * The `previous <CSS selector>` syntax will find the previous element in the DOM the given CSS selector.