使用jquery，我如何选择div内的所有图像来改变它的来源

Question

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.

Answer 1

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++;
});

Answer 2

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> 

Answer 3

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> 

Answer 4

您可以按照代码段返回img元素列表，

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

Answer 5

change all to same:

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

change all to something:

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

Answer 6

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 !!