从 js 对象获取 img 源答案

【问题标题】：Get img source from js Object从 js 对象获取 img 源
【发布时间】：2016-07-31 11:23:52
【问题描述】：

我有一个 js 对象slider.controlNav，它包含 DOM 元素。我需要保存在可变图像源中，其中包含与类'flex-active' 的链接。

 jQuery.each(slider.controlNav, function(i, val) {
   var  dom_object = slider.controlNav.get(i);
      console.log(dom_object)
  });

顶部代码返回：

<a href="#0" class="flex-active">
    <img src="img/slider-portfolio/logos/__ico__Fason$Active.png">
</a>

<a href="#1>
    <img src="img/slider-portfolio/logos/__ico__Web$Active.png">
</a>

<a href="#2" class="flex-active">
    <img src="img/slider-portfolio/logos/__ico__New$Active.png">
</a>

我的代码：

jQuery.each(slider.controlNav, function(i, val) {
   var  dom_object = slider.controlNav.get(i).find('img').attr('src');
      console.log(dom_object)
  });

在控制台之后我有错误：

未捕获的类型错误：slider.controlNav.get(...).find 不是函数

【问题讨论】：

你可能需要$(val).find('img').attr('src')
显示console.log($(val).html())
你能发一个fiddle这个吗？

标签： javascript jquery object

【解决方案1】：

get 函数为您提供底层 DOM 对象。您需要将其转换为 jQuery 对象。

试试$(slider.controlNav.get(i)).find('img').attr('src');

【讨论】：

你错过了问题的第一行和最重要的最后一行；）

【解决方案2】：

请检查此代码。

jQuery("slider.controlNav a").each(function() {
    var  dom_object = jQuery(this).find('img').attr('src');
    console.log(dom_object)
});

【讨论】：

【解决方案3】：

您确实想使用this 或val，它们指代迭代中的当前元素：

jQuery.each(slider.controlNav, function(i, val) {
    var  src = jQuery(this).eq(i).find('img').attr('src');
    console.log( src )
});

或者，只需使用纯 JS，如下所示：

slider.controlNav.forEach(function(val) {
    var src = val.querySelector( 'img' ).src;
    console.log( src );
});

【讨论】：

【解决方案4】：

见this jsbin

var flexActiveControlNavs = slider.controlNav.find(".flex-active");

jQuery.each(flexActiveControlNavs, function(i, val) {
   var dom_object = flexActiveControlNavs.eq(i).find('img').attr('src');
   console.log(dom_object);
});

这将只返回属于“flex-active”类元素的子元素的图像源。

【讨论】：