jQuery从子div获取图像

时间:2015-08-29 00:08:00

标签: javascript jquery

jQuery的新手,请保持温和。

我有这样的结构:

<div id="stacks_in_53_page0" class="stellar_slider" style="display:     none;"> 
<div class="centered_image">
<img class="imageStyle" src="files/stacks-image-EA60B7F.png" alt="Stacks Image 56">
</div></div>

<div id="stacks_in_53_page0" class="stellar_slider" style="display: none;"> 
<div class="centered_image">
<img class="imageStyle" src="files/stacks-image-49A33E9.png" alt="Stacks Image 57">
</div></div>

我能够轻松地检索“stellar_slider”类的所有实例,但我真正想要的是包含在其中的图像源。

是否有一种简单的方法可以从'stellar_slider'ID开始获取图像源数组?我会使用img类的imageStyle本身,但它并不是这个结构独有的 - 它可以用在页面上其他地方的图像上。

任何帮助非常感谢。感谢。

2 个答案:

答案 0 :(得分:3)

您可以使用each并阅读所有img child of stellar_slider

var arrayReturn=new Array();
$(".stellar_slider img").each(function(){
    arrayReturn.push($(this).attr("src"));
});

答案 1 :(得分:2)

您可以使用

选择div中的所有图像
$('.stellar_slider img')

请注意,如果您正在寻找一个班级.,如果您正在寻找#,请使用点id

要获取来源,您可以在上面的集合中进行映射:

var sources = $('.stellar_slider img').map(function(){
    console.log($(this).attr('src')); // show the sources in the console
    return $(this).attr('src'); 
});
console.log(sources);

现在你有了所有的图像&#39;数组sources中的来源。

根据您的使用情况,您可能会对我更喜欢的纯JavaScript解决方案感兴趣,因为我发现它更清晰:

var sources = [].slice.call(document.querySelectorAll('.stellar_slider img')).map(function(val){
    return val.getAttribute('src');
});
console.log(sources);