Loop through JQuery selector using TypeScript for...of

Question

I prefer the TypeScript forloop over the JQuery each().

I.e. because return and break work more like expected.

Is there an easy way to loop through a JQuery object using TypeScript?

let $elements = $('.text-element');

// error: Type 'JQuery' is not an array type or a string type.
for ( let $element of $elements )
{
}

Answer 1

You can use jQuery get to return a iterable of the DOM elements (not jQuery elements):

let $elements = $('.text-element');

for (let element of $elements.get()) {
  let $element = $(element);
  ...
}

Answer 2

Because jQuery's class selector doesn't return an iterator, but a jQuery object. To use a for..of syntax you need to make it an array-like iterable using Array#from.

$(function() {
  const elements = Array.from($('.text-element'));

  for (const element of elements) {
    console.log(element.innerHTML);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="text-element">
  10
</div>
<div class="text-element">
  20
</div>
<div class="text-element">
  30
</div>