Question

<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__
< []

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

Answer 1

根据jQuery文档http://api.jquery.com/map/，map函数的回调与本机ES数组映射略有不同。回调参数解释如下：

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()];
});

Answer 2

这个脚本似乎有效：

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;

}

fiddle

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

2 个答案: