CODEWITHSUNDEEP
jqueryimage
BenyaminRmb
BenyaminRmb

Reputation: 163

using jquery, how can i select all images inside of a div to change its source

I have the following div and I know the selector Id of the DIV. 

<div class="event">
  <img src="/Content/Images/Icons/calendar1.png">
  <img src="/Content/Images/Icons/calendar2.png">
  <img src="/Content/Images/Icons/calendar3.png">
  <img src="/Content/Images/Icons/calendar4.png">
  <img src="/Content/Images/Icons/calendar5.png">
  <img src="/Content/Images/Icons/calendar6.png">
</div>

I need something to find all images selector inside the div that i have so i can go change the source of the each image to a new image.

Upvotes: 4

Views: 9148

Answers (6)

Toxy.x3
Toxy.x3

Reputation: 31

Use array selector For that : img[0] , img[1] And .Attr method ("src","url"); Or you can Just give Them class to select the each img !!

Upvotes: 1

Code Lღver
Code Lღver

Reputation: 15603

Use this code to retrieve the image URL:

$('.event img').each(function(){
  alert($(this).attr('src'));
});

if you want to change the image URL then use this:

var inc = 1;
$('.event img').each(function(){
  $(this).attr('src','path of image/imagename'+inc+'.imageextension');
  inc++;
});

Upvotes: 4

Suresh Atta
Suresh Atta

Reputation: 121998

You can try children selector and attr callback together. 

  $(".event img").attr("src", function() { // or id
      return "Something/" + $(this).attr("src");
 });
   console.log($(".event").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <img src="/Content/Images/Icons/calendar1.png">
  <img src="/Content/Images/Icons/calendar2.png">
  <img src="/Content/Images/Icons/calendar3.png">
  <img src="/Content/Images/Icons/calendar4.png">
  <img src="/Content/Images/Icons/calendar5.png">
  <img src="/Content/Images/Icons/calendar6.png">
</div>

Upvotes: 3

mtbnunu
mtbnunu

Reputation: 300

change all to same: 

$(".event>img").attr("src","/New/Image.jpg");

change all to something: 

$(".event>img").each(function(index){
    $(this).attr("src",variable);
});

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can loop through each element like this:

i represent the index of each element, I've added this incase you want something like

imgurl1 imgulr2 imgurl3

and so on

$(".event img").each(function(i, x) {
  $(this).attr("src", "/Content/Images/Icons/NewURL" + (i + 1) + ".png")
  console.log($(this).attr("src"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <img src="/Content/Images/Icons/calendar1.png">
  <img src="/Content/Images/Icons/calendar2.png">
  <img src="/Content/Images/Icons/calendar3.png">
  <img src="/Content/Images/Icons/calendar4.png">
  <img src="/Content/Images/Icons/calendar5.png">
  <img src="/Content/Images/Icons/calendar6.png">
</div>

Upvotes: 3

CCoder
CCoder

Reputation: 161

You could following code snippet to return list of img elements,

$('.event').find('img');

Upvotes: 1

Related Questions