1

I am wondering if it is possible in Alpine.js to select all the $refs with the same prefix.

For example if I have a list of divs:

<div> 
  <div x-ref="tab-1">some random stuff 1</div>
  <div x-ref="tab-2">some random stuff 2</div>
  <div x-ref="tab-3">some random stuff 3</div>
  <div x-ref="tab-4">some random stuff 4</div>
  <div x-ref="tab-5">some random stuff 5</div>
  <div x-ref="tab-6">some random stuff 6</div>
</div>

Is there anyway to select all the tabs that is starting with "tab-" ? I wanted to do something that is similar to jQuery/QuerySelectorAll

Wildcards in jQuery selectors

getElementById() wildcard

I tried assigning all the tabs with the same reference, but it only seems to return the last element with the reference.

I can access them in individually by using square notation : this.$refs['tab-1'] but I am not sure if there is anyway to do a wildcard selection.

Any kind of advice or discussion is welcome. Thank you.

user2232355
  • 195
  • 14

1 Answers1

1

So after browsing through the the documentation and github help section, wildcard selection might not be available yet on alpine.js.

I believe that this is want I needed:

this.$el.querySelectorAll('#tabs');

Find the original post for more information https://github.com/alpinejs/alpine/issues/252

user2232355
  • 195
  • 14