Jquery 数组混淆的 .map() 函数

Question

我正在尝试实现一些非常简单但无法正常工作的东西。

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

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

我做错了什么？

jsFiddle 如果有帮助。

Answer 1

x值存储的是找到的元素的索引，不是元素，使用this获取当前元素，text()获取内部文本：

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

demo

要从普通数组中的 jquery 对象转换，请使用 get() 方法

console.log(test.get());

Answer 2

像往常一样，使用 jQuery 类似数组的方法，第一个参数是 index，而不是相关元素。另一个问题是 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 会在 return 中得到一个 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>

Jquery 数组混淆的 .map() 函数

.map() function on Jquery array confusion

javascript

jquery

arrays

map-function