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 )
{
}

ariel · Accepted Answer · 2020-08-13 03:32:33Z

4

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);
  ...
}

answered Aug 13, 2020 at 3:32

ariel

16.2k13 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kunal Mukherjee · Accepted Answer · 2019-07-05 10:14:55Z

1

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>

edited Jul 5, 2019 at 10:14

answered Jul 5, 2019 at 10:09

Kunal Mukherjee

5,8733 gold badges29 silver badges55 bronze badges

2 Comments

Dirk Boer Over a year ago

Is Array.from new? The 2.8 typings don't seem to recognize it.

Kunal Mukherjee Over a year ago

if your browser supports ES6 it should be available

Codekie · Accepted Answer · 2019-07-05 10:16:37Z

1

The result of $('.text-element') is not a real Array. Try creating an Array from it, first:

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

for ( let $element of $elements )
{
}

edited Jul 5, 2019 at 10:16

answered Jul 5, 2019 at 10:05

Codekie

7,9043 gold badges20 silver badges27 bronze badges

2 Comments

Dirk Boer Over a year ago

Is Array.from new? The 2.8 typings don't seem to recognize it.

Codekie Over a year ago

It's part of the ES6 spec: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

chocolateboy · Accepted Answer · 2020-08-23 16:14:58Z

0

jQuery collections have been iterable since v1.12.0 and v2.2.0 (PR, commit), which were released in January 2016:

Symbol/iterator support

We've added support for the Symbol type and iterators via Symbol.iterator added in ES6/ES2015. "Symbol" will be detectable with jQuery.type, and jQuery objects can be iterated with for-of where supported.
for (element of $elements) {
 console.log(element);
}

Sounds like you just need to update your jQuery.

answered Aug 23, 2020 at 16:14

chocolateboy

1,8401 gold badge21 silver badges22 bronze badges

Collectives™ on Stack Overflow

Loop through JQuery selector using TypeScript for...of

4 Answers 4

Comments

2 Comments

2 Comments

Symbol/iterator support

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Symbol/iterator support

Comments

Your Answer

Sign up or log in

Post as a guest

Related