Question

相对于JQuery for，我更喜欢TypeScript each()循环。

即因为return和break的工作更像预期的那样。

是否有使用TypeScript遍历JQuery对象的简单方法？

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

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

Answer 1

$('.text-element')的结果不是真实的Array。首先尝试从中创建一个Array：

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

for ( let $element of $elements )
{
}

Answer 2

因为jQuery's class selector不返回迭代器，而是一个jQuery对象。要使用for..of语法，您需要使用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>

Answer 3

您可以使用jQuery get返回一个可迭代的DOM元素（不是jQuery元素）：

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

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

Answer 4

自v1.12.0和v2.2.0（PR，commit）发布以来，jQuery集合一直是可迭代的，它们在January 2016中发布：

符号/迭代器支持

我们通过ES6 / ES2015中添加的Symbol.iterator添加了对Symbol类型和迭代器的支持。 jQuery.type可以检测到“ Symbol”，并且可以在受支持的情况下使用for-of来迭代jQuery对象。
for (element of $elements) {
 console.log(element);
}

听起来像您只需要更新jQuery。

使用TypeScript for ... of遍历JQuery选择器

4 个答案:

符号/迭代器支持