獲取同一類元素內的圖像屬性

Question

我有以下結構，我想獲取所有圖像的src屬性數組

<div id="selectable"> 
    <li class="x">
        <img src="\images\1.jpg" />
    </li>
    <li class="x">
        <img src="\images\2.jpg" />  
    </li>
    <li class="x">
        <img src="\images\3.jpg" />  
    </li>
</div>

Answer 1

你可以做：

var sources = $("#selectable li img").map(function() {
    return this.src;
}).get();

Answer 2

在純JS中，類似這樣的方法應該起作用：

var images = document.querySelectorAll("#selectable img");
var img_array = [];

for(var i in images) {
    img_array.push(images[i].src);
}

console.log(img_array);

Answer 3

用jquery做到這一點的一種方法：

$('#selectable').children('li').each(
function(index){
imgSrc[index]=$(this).children('img').attr('src');
}
);

Answer 4

也：

var img_array = [];
$.each($("#selectable").find('li > img'),function(index,image){


    img_array.push($(image).attr("src"));

});

Answer 5

var srcarray=[];
$( "#selectable .x img" ).each(function( index ) {
  srcarray[index]=$(this).attr('src');
});
alert(srcarray);