Change multiple images src with jQuery

Question

I have a grid of 2 rows and 3 columns and I want a different image in each card, also the images should be different depending if the user enters from different menus.

I've tried using a for loop to select different images but only selects the first or the las ones.

$("img").attr('src', function() {
  for (var i = 0; i < this.length; i++) {
    return "media/" + currentId + i + ".jpg";
    i++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is 1 card out of 6 -->

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-content">
    <span class="card-title activator"></span>
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
  <div class="card-reveal">
    <span class="card-title"><i class="material-icons right">close</i></span>
    <p>Lorem impsum</p>
  </div>
</div>

As I've described earlier in the post, the output should be 6 different images and it's just 6 equal images.

Sorry @RoryMcCrossan I've forgot to explain that, it's var currentId = this.id It's inside document.ready() and I've used it several times during the code. I've made it a variable because I was having some trouble making it work. — Tomás Nicolorich
– Tomás Nicolorich, Commented Jan 17, 2019 at 1:07

Rory McCrossan · Accepted Answer · 2019-01-16 15:47:00Z

By providing a function to attr() you're creating an implicit loop through every img element. As such you don't need the for loop within that function. You then can get the index of the current element in the loop by receiving the first parameter to the function and using that as the name of the image file. Try this:

$("img").attr('src', function(i) {
  return "media/" + i + ".jpg";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is 1 card out of 6 -->

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
</div>
<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
</div>

rollingthedice · Accepted Answer · 2019-01-16 15:43:11Z

0

You can set each image an id required for the corresponding source and using jQuery do:

$('.card img').each(function() {
    var path = 'media/' + $(this).attr('id') + '.jpg'
    $(this).attr('src', path);
});

answered Jan 16, 2019 at 15:43

rollingthedice

1,1258 silver badges17 bronze badges

2 Comments

rollingthedice Over a year ago

I thought currentId in his code was a pseudo for an identification to those images which he wanted to implement rather remove it. Should i delete this post?

Rory McCrossan Over a year ago

You could be right there, that needs some clarification from the OP. No reason to delete at all :)

Collectives™ on Stack Overflow

Change multiple images src with jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related