通过for循环从列表中的每个图像文件获取源属性

时间：2019-02-11 12:51:38

标签： javascript jquery

我试图通过for循环获取列表中图像文件的source属性。但是，它返回未定义images [i] .attr（'src'）。但是，一个简单的images [i]返回html图像集合的列表。以下是我的代码。请建议我为什么代码不起作用。

$(function(){
  
  let images = $('.column1 img');
  for(let i=0; i<images.length; i++){
     console.log(images[i].attr('src')); 
  }
});
#main__slider{
  width:40rem;
  height:25rem;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr)
}

.column1{
  border:1px solid;
  position:relative;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
  <div class="column1">
    <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="something">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="something1">
  </div>
  <div class="column1">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
    <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
    <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
    <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
    <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
    <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
    <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
    <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
    <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
  </div>
</div>

5 个答案:

答案 0 :(得分：1)

.attr()是一种jquery方法，因此通过将image[i]封装在$（）中，使其成为一个jquery对象。

$(image[i])


$(function(){
  
  let images = $('.column1 img');
  for(let i=0; i<images.length; i++){
     console.log($(images[i]).attr('src')); 
  }
});
#main__slider{
  width:40rem;
  height:25rem;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr)
}

.column1{
  border:1px solid;
  position:relative;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
  <div class="column1">
    <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="something">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="something1">
  </div>
  <div class="column1">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
    <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
    <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
    <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
    <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
    <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
    <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
    <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
    <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
  </div>
</div>

答案 1 :(得分：1)

您可以使用：纯JavaScript，非常简单。

  let images = document.querySelectorAll("img");
  for(let i=0; i<images.length; i++){
     console.log(images[i].src); 
  }

答案 2 :(得分：1)

通过使用elem[index]，您将获得元素的HTML对象。 attr方法是一种Jquery方法，因此您可以迭代每个元素并记录src。

$(function(){
  
  $('.column1 img').each(function(){
    console.log($(this).attr('src'));
  });
});
#main__slider{
  width:40rem;
  height:25rem;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr)
}

.column1{
  border:1px solid;
  position:relative;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
  <div class="column1">
    <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="something">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="something1">
  </div>
  <div class="column1">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
    <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
    <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
    <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
    <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
    <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
    <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
    <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
    <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
  </div>
</div>

答案 3 :(得分：1)

通过使用索引，$('.column1 img')[index]将返回本机元素，您可以直接使用.src。

let images = $('.column1 img');
for (let i = 0; i < images.length; i++) {
  console.log(images[i].src));
}

答案 4 :(得分：0)

 //get nodelist object of all the images
 let imageList = document.querySelectorAll("img");
 //make it into an array
 imageList=Array.from(imageList);
 //run a map or loop on the array and log the source urls 
 imageList.map((i,index)=>{
       return console.log(i.src);
 });
相关问题
最新问题