使用jQuery，如何选择一个div内的所有图片并更改其源？

Question

使用jQuery，如何选择一个div内的所有图片并更改其源？

4

我有以下的div，我知道这个div的选择器ID。

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

我需要找到div内的所有图像选择器，以便我可以更改每个图像的源为新图像。

- BenyaminRmb

$('div#idOfDiv img') - kukkuz

http://api.jquery.com/each 和 http://api.jquery.com/prop - Rory McCrossan

6个回答

3

您可以尝试使用子元素选择器和属性回调一起使用。

  $(".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>

- Suresh Atta

3

您可以按以下方式循环遍历每个元素： i 表示每个元素的索引，我添加了它以防您需要类似于 imgurl1 imgulr2 imgurl3 等等。

请注意，保留了HTML标记。

$(".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>

- Carsten Løvbo Andersen

1

使用数组选择器实现： img[0] , img[1]，并使用.Attr方法("src","url"); 或者给它们分配类来选择每个图像！

- Toxy.x3

1

您可以使用以下代码片段返回img元素列表：

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

- CCoder

1

将所有内容更改为相同：

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

change all to something:

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

- mtbnunu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Code Lღver · Accepted Answer

使用此代码检索图像URL：

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

如果您想更改图像URL，请使用以下方法：

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