Question

好的，我想.map（）#stage的html内容的src值变量srcArray

var content = $('#stage').html();
var srcArray = $.map($(content), function(el) {
return {value: $(el).children().attr('src')};
});

但是当我在console.log数组中时，每个src值都是未定义的。有谁知道怎么了？

html是

<div id="stage">
<div style="left:xxx, top:xxx">
<img src="xxxxx" style="width:xxx, height:xxx"/>
</div>
</div>

我是否需要将src值转换为字符串以使其显示在chrome控制台上？

Answer 1

您可以从img元素中获取所有#stage。

var srcArray = $('#stage').find('img').map(function() {
  return { value: $(this).attr('src') };
}).get();

Answer 2

问题：

1。声明return {value: $(el).children().attr('src')};将为'div#stage'的每个孩子执行，但阶段也有 div，其中没有任何src属性。

2。如果'div＃stage'have multiple img`元素，则上述语句将只返回一个结果

3。声明$(content)创建新的html元素。如果您只是想要进行打击（不良做法），请不要创建新内容。

解决方案：

1。过滤子项，以便只选择img标记。

2。在children('img')上映射，以便如果有多个img元素，则会为每个img执行代码

3。使用$('#stage')代替$(content)（正在创建新的html元素）

试试这个 -

var content = $('#stage').html();
var srcArray = $.map($(content).children("img"), function (el) {//better way use $.map($('#stage').children("img"), function (el) {
    return {
        value: $(el).attr('src')
    };
});
console.log(JSON.stringify(srcArray))

<强>更新： -

DEMO

Answer 3

问题在于你的孩子（）选择和阅读属性。它将读取第一个孩子的属性。因此，如果第一个孩子没有属性，那么它将是未定义的。所以你需要实际选择你想要的元素。您选择html并且根据该html构建节点集也很奇怪。只需选择并使用地图

var srcArray = $('#stage [src]').map(
     function () {
         return { value: $(this).attr('src')};
     }
);

.map（）img src属性未定义

3 个答案:

DEMO