CODEWITHSUNDEEP
javascriptjqueryhtml
user1853128
user1853128

Reputation: 1114

How to write the best way to change the image source using conditions Jquery

Sub.html:

<div>

<img src ="worlds/application/images/aa.png" class="path"/>
<img src ="worlds/application/images/bb.png" class="path"/>
<img src ="worlds/application/images/cc.png" class="path"/>
<img src ="worlds/application/images/dd.png" class="path"/>
<img src ="worlds/application/images/ee.png" class="path"/>

</div>

Jquery:

$('#main').load( "../sub.html",function(data){
                    var imgSrc = $('.path');
                    var img1 = imgSrc[0].src.split('application')[0]+"css/images/aa.png";
                    var img2 = imgSrc[1].src.split('application')[0]+"css/images/bb.png";
                    var img3 = imgSrc[2].src.split('application')[0]+"css/images/cc.png";
                    var img4 = imgSrc[3].src.split('application')[0]+"css/images/dd.png";
                    var img5 = imgSrc[4].src.split('application')[0]+"css/images/ee.png";
                if(imgSrc[0].src.indexOf('aa')>-1){
                    imgSrc[0].attr('src',img1);
                }
                });

Is there any best way to change the path of all the images. What I have tired is I am splitting the path till application node, because I need to append my new url at the application level.

Upvotes: 0

Views: 322

Answers (2)

emco
emco

Reputation: 4709

This is another way of doing what you have done. In this code, you can have whatever number of images you want, all you need is to have them with path as css class.

$('#main').load( "../sub.html",function(data){
  var newPath = 'http://localhost:8080/Content/css/images/';
  $.each($('.path'), function(index){
  var originalSource = $(this).attr('src');

  // Replacing the source
  var newSource = newPath + originalSource.substr(originalSource.lastIndexOf('/') + 1);

  // Setting the new value of src
  $(this).attr('src', newSource);
});
});

You can check a working example here: http://jsfiddle.net/7zs7N/

Hope it helps!

Upvotes: 2

cracker
cracker

Reputation: 4906

Try Like

$(".class > img").each(function() {
   var src = $(this).attr('src');           
   $(this).attr('src', 'newsrc');           
});

Upvotes: 1

Related Questions