Iterating target selectors

If you need to iterate target selector elements to perform actions on all of them, this functionality is built into the syntax and mostly covered in the earlier documentation on target selectors.

 

#buttonStart:click {        <-- Event selector (#buttonStart) and the event (click)
    .myDivs {               <-- Target selector, which can target multiple elements
        ...do something.    <-- Action command
        ...do something.    <-- Action command
        ...etc.
    }
}

All elements that match the target selector will be affected by the action commands.

If you want to affect multiple elements, you must specify a target selector underneath the event selector.

When you have multiple elements that match a target selector, there are two possible methods you can use to run action commands, the regular event flow and the parallel event flow. See the event flow page for how both of those work.

If you need a more detailed explanation about target selectors, see the target selector documentation.

 

What happens when the event selector is the same as target selector?

What if the event selector is the same as the target selector? Do we still need a target selector?

If you want to run actions on all the elements that match the event selector, yes.

The event selector only receives an event on one element at a time. The target selector, when no target selector is specified, is the element that received the event. That will only ever be one element.

So to affect all elements that match the event selector, you need to specify a target selector underneath the event selector.

For example, if you want to affect all elements that match the selector ".myDivs" when clicking on an element that also has the class "myDivs":

.myDivs:click {
    .myDivs {        <-- A specified target selector is needed to work on *all* elements with the "myDivs" class.
        render: "You just clicked on one of us.";
    }
}

And this is not the way to do it - this only affects the element receiving the event:

.myDivs:click {
    render: "You just clicked on me.";        <-- Only affects the target that receives the event.
}