Selector methods are used to select specific page elements so you can work with them in code. Depending on which selector you use, you are able to select elements from the different scopes described below.
There are two types of selector methods:
The $w() method selects elements in the global scope. A selector with global scope can be used to select any element that isn't contained in a repeater. You can also use it to select an element that is contained in a repeater, but it's important to understand what that selection means.
When you select an element contained in a repeater from the global scope and you get the value of one of the element's properties, you receive the value of that element's property from the repeater's item template.
For example, here templateText is the text value of the myRepeatedText element from the repeater's item template.
When you select an element contained in a repeater from the global scope and you set the value of one of the element's properties or call one of the element's methods, the value is set or the method is called on the repeater's item template and all repeated instances of that element.
For example, here the item template is changed so that "New Text" is the text value of the myRepeatedText element. Also, all existing repeated items have the text value of their myRepeatedText element set to "New Text".
And here the item template is changed so that the myRepeatedImage element is hidden. Also, all existing repeated items have their myRepeatedImage element hidden.
There are two ways to get a repeated-item-scope selector:
The $item parameter of the forEachItem(),
forItems(), and onItemReady() event handlers.
When calling the $w.at() method and passing it an event whose context is COMPONENT_SCOPE. This is usually done in an event handler that handles an event on an element inside a repeater.
A selector with repeated item scope can be used to select a specific instance of a repeating element.
For example, here when the myRepeatedImage element is clicked, the value of a text element in the same repeated item where the image was clicked is changed to "Selected". All the other text elements with the ID myRepeatedText in the other items of the repeater aren't affected.
And here, when each item is ready, the value of a text element is set to a value found in that specific item's data.
You can also use a selector with repeated item scope to select non-repeating elements from the global scope. However, you can't change a repeater's item template using a selector with repeated item scope.
You can also restrict a selector with repeated item scope to only select elements from the current repeated items and their descendants, but not elements from the global scope, by adding .scoped() to the selector.
For example, to select only the element with ID #myElement in the current repeated item, use:
Learn how to create repeated items and access their data using selector scope