Question

`

<ul class="flickr-badge-content">
    <li class="first">
        <img data-photo-attribution="andysouthwales" data-photo-page="http://www.flickr.com/photos/andysouthwales/1212121/" data-photo-title="abcd" data-photo-id="1212121" src="http://farm3.static.flickr.com/2855/1212121_ce6bfd5c38_s.jpg"></img>
    </li>
    <li>
        <img data-photo-attribution="andysouthwales" data-photo-page="http://www.flickr.com/photos/andysouthwales/1263324993173/" data-photo-title="tennn" data-photo-id="1263324993173" src="http://farm8.static.flickr.com/7457/1263324993173_0e3e9745f8_s.jpg"></img>
    </li>
    <li>..............</ul>.......

我想获得所有图片及其属性。请帮忙......

Answer 1

我为您提供了一个选择所有image标记的示例，并获取每个标记的source属性。您可以使用它来获得所需的whichever attribute。

使用JavaScript

var images = document.getElementsByTagName('img'); 
var srcList = [];//This is just for the src attribute
for(var i = 0; i < images.length; i++) {
    srcList.push(images[i].src);
 }

您也可以使用document.getElementsByTagName('img')集合代替document.images。

function allSrc() {
  var src = [];
  var imgs = document.images;
  for (var i=0, iLen=imgs.length; i<iLen; i++) {
    src[i] = imgs[i].src;
  }
  return src;
}

使用Jquery：

var srcList = $('img').map(function() {
   return this.src;
}).get();

Answer 2

您可以使用

循环浏览所有图像属性

$('img').each(function(currentImage){
    console.log(currentImage.data('photo-attribution')); //log some attribute
});

我相信你会把剩下的事情搞清楚。

Answer 3

试

 $(document).ready(function () {
        var images = $("img");
        for (i = 0; i < images.length; i++) { 
        alert($(images[i]).attr("data-photo-attribution"));
        }
    });

Answer 4

你去了：

$('.flickr-badge-content li img').each(function(){
var data = $(this).data();
for(var i in data){
  $('<li>', {
      text: i + ': ' + data[i]
  }).appendTo('.flickr-badge-content');
}});

<强> Working Fiddle

如何获得所有img及其属性？

4 个答案: