javascript - Jquery 数组混淆中的 .map() 函数

Question

我正在尝试实现一些非常简单的事情，但无法使其正常工作。

我正在循环遍历 tr 的 td 子级，并尝试将单元格的值放入数组中。

$($("#thetable").find("tr")[0]).find("td").map(function(x) {return $(x).innerText;} );

我做错了什么？

jsFiddle如果有帮助的话。

Answer 1

像往常一样，对于 jQuery 类似数组的方法，第一个参数是索引，而不是相关元素。另一个问题是 innerText 是一个普通元素的属性，而不是 jQuery 集合 - 要么使用 jQuery 版本 (.text()) ，或者先不要将元素转换为 jQuery 集合:

var rows = $("#thetable").find("tr")
var test = $(rows[0]).find("td").map(function(_, x) { return x.innerText;});
console.log(test);

  <table id="thetable">
  <tr>
    <td>20</td>
    <td>2</td>
    <td>10</td>
    <td>30</td>
    <td>50</td>
  </tr>
  </table>
</div>

当然，在 jQuery 集合上使用 .map 将会返回一个 jQuery 集合 - 如果您不想要这样，可以调用 .get()将结果转换为数组

var test = $(rows[0]).find("td").map(function(_, x) { return x.innerText;}).get();

或者首先使用原生数组方法，而不是 jQuery(无论如何都不需要 jQuery 来完成这么简单的事情):

const arr = Array.prototype.map.call(
  document.querySelectorAll('#thetable td'),
  td => td.textContent
);
console.log(arr);

<div id="banner-message">
  <table id="thetable">
  <tr>
    <td>20</td>
    <td>2</td>
    <td>10</td>
    <td>30</td>
    <td>50</td>
  </tr>
  </table>
</div>