映射 jQuery 对象的数组不起作用

Mapping an Array of jQuery objects not working?

本文关键字：数组 不起作用 对象 jQuery 映射      更新时间：2024-05-20
<ul id="source">
  <li>北京空气质量：<b>90</b></li>
  <li>上海空气质量：<b>70</b></li>
  <li>天津空气质量：<b>80</b></li>
  <li>广州空气质量：<b>50</b></li>
  <li>深圳空气质量：<b>40</b></li>
  <li>福州空气质量：<b>32</b></li>
  <li>成都空气质量：<b>90</b></li>
</ul>

我的目标是从 html 文件中的<ul>...</ul>中检索信息。数据格式应该是这样的：[["北京",90],["上海",70],.....]数组数组中的第一个元素是中文文本的子字符串，第二个元素是数字。

我对此使用 jQuery 的想法是

function getData() {
    /*
     coding here
     */
    var sourceData = $("#source").find("li");
    /*
     data = [
     ["北京", 90],
     ["北京", 90]
     ……
     ]
     */
    return sourceData.map(function (item) {
        return [$(item).text().substring(0,2),$(item).find("b").text()];
    });

它返回["", "", "", "", "", "", "", "", "", "", "", "", "", ""].

所以我开始检查哪里出了问题。首先我尝试了没有像这样的jQuery的

function getData() {
var rowData = document.getElementById("source").getElementsByTagName("li");
var sourceData = [].slice.apply(rowData);
sourceData.map(function (item) {
        return [$(item).text().substring(0, 2), $(item).find("b").text()];
    });

它奏效了。所以我开始测试

var sourceData = $("#source").find("li");
sourceData.map(item => item);

回报是[0, 1, 2, 3, 4, 5, 6].我想也许var sourceData = $("#source").find("li");的回归不是Array而是 

> sourceData.__proto__
< []

我很困惑。有人可以帮忙吗？谢谢！

根据 jQuery 文档 http://api.jquery.com/map/，map 函数的回调与原生 ES 数组 map 略有不同。回调参数说明如下： 

Type: Function( Integer index, Element domElement ) => Object
A function object that will be invoked for each element in the current set

因此，请按如下方式更改getData函数：

return sourceData.map(function (index, item) {
    return [$(item).text().substring(0,2),$(item).find("b").text()];
});

这个脚本似乎有效：

function getData() {
    var sourceData = [];
    $("#source li").each(function (){
        var li_text = $(this).text();
        li_text = li_text.split(":");
        var sData   = [li_text[0].substring(0,2),li_text[1]];
        sourceData.push(sData);
    });
    return sourceData;
}

小提琴

相关文章：