.map(）img src属性未定义

.map() img src attribute undefined

本文关键字：属性 未定义 src img map      更新时间：2023-09-26

好的，所以我想将#stage的html内容的src值.map（）到变量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控制台上显示吗？

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

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

问题：

1。语句return {value: $(el).children().attr('src')};将为'div#stage'的每个子级执行，但阶段也有不具有任何CCD_ 6属性的CCD_。

2.在'div#stage'have multipleIMG'元素的情况下，上述语句将只返回一个结果

3.语句$(content)创建新的html元素。如果你只想treverse，就永远不要创建新内容（这是一种糟糕的做法）。

解决方案：

1.筛选子项，以便只选择img标记。

2.在children('img')上映射，这样，如果有1个以上的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))

更新：-

演示

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

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