Changing image src & href path

Question

I want to change multiple images path but there is something wrong whit this. can anyone help me to figure it out pls. The code is working well but all the thumbnail images and the href path appears in the same image source (01_sml.jpg) & (Picture1.jpg).

js --

$img = $('#adv1 li img');
    $img.attr('src', $img.attr('src').replace("img/","img/_advertorial/00/") );
    $img = $('#adv1 li a');
    $img.attr('href', $img.attr('href').replace("img/","img/_advertorial/00/") );

html --

<ul class="thumbs" id="adv1">
<li><a class="venobox" data-gall="myGallery" href="img/Picture1.jpg"><img src="img/01_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture2.jpg"><img src="img/02_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture3a.jpg"><img src="img/03_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture4.jpg"><img src="img/04_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture5.jpg"><img src="img/05_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture6.jpg"><img src="img/06_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture7.jpg"><img src="img/07_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture8.jpg"><img src="img/08_sml.jpg" /></a></li>
</ul>

What exactly do you want to do? The jQuery you posted does change all the src and href attributes to the same thing. — Ahmed Fasih
– Ahmed Fasih, Commented Jun 13, 2015 at 6:56
I just want to change the href and src 's image paths > img/ to img/_advertorial/00/ thats all. — Erdinc TOGULGA
– Erdinc TOGULGA, Commented Jun 13, 2015 at 7:02
Using latest jQuery 2.1.1, that's what happens: your code works! — Ahmed Fasih
– Ahmed Fasih, Commented Jun 13, 2015 at 7:04
just want to replace the image path folder, not to replace or duplicate filenames. — Erdinc TOGULGA
– Erdinc TOGULGA, Commented Jun 13, 2015 at 7:10

Spencer Wieczorek · Accepted Answer · 2015-06-13 07:04:04Z

1

You need to use .each to go over each element so you don't overwrite all of them:

$img = $('#adv1 li img');
$img.each(function( i ) {
    $(this).attr('src', $(this).attr('src').replace("img/","img/_advertorial/00/") );
});

$img = $('#adv1 li a');
$img.each(function( i ) {
    $(this).attr('href', $(this).attr('href').replace("img/","img/_advertorial/00/") );
});

answered Jun 13, 2015 at 7:04

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Jakhotiya · Accepted Answer · 2015-06-13 07:12:48Z

0

$img=$('#adv1 li img') returns array of img elements so you need to iterate over then using .each() function

    $img = $('#adv1 li img');
$img.each(function( i ) {
    $(this).attr('src', $(this).attr('src').replace("img/","img/_advertorial/00/") );
});

$img = $('#adv1 li a');
$img.each(function( i ) {
    $(this).attr('href', $(this).attr('href').replace("img/","img/_advertorial/00/") );
});

answered Jun 13, 2015 at 7:12

Abhishek Jakhotiya

1731 silver badge5 bronze badges

Comments

CodingIntrigue · Accepted Answer · 2015-06-13 07:14:12Z

0

You can use the function overload of prop to execute an action for each element and assign it's value:

$('#adv1 li img').prop("src", function(index, existingValue) {
    return existingValue.replace("img/","img/_advertorial/00/");
}); 
$('#adv1 li a').prop("href", function(index, existingValue) {
    return existingValue.replace("img/","img/_advertorial/00/");
});

jsFiddle Example

The advantage to this is that you're not re-querying for information that jQuery already provides, like the existing value of the property.

answered Jun 13, 2015 at 7:14

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Collectives™ on Stack Overflow

Changing image src & href path

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related