Replace attribute with an index value in jQuery

Question

I have a list of images (thumbs) near a container with one image. I want jQuery to count the index of the <a> element, and then replace the number of the src attribute of the image below.

I mean, considering this code:

<ul class="thumbs">
    <li><a href="#"><img src="img1.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img2.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img3.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img4.jpg" alt="image here"/></a></li>
</ul>

<div class="container">
    <img src="img1.jpg" alt="destiny image here"/>
</div>

The expected behavior is, when user clicks the second <a>, the .container img change its src attribute to img1.jpg. And when click the fourth <a> the attribute should change to img3.jpg.

I have got this far: jsFiddle demo

$(document).ready(function() {
    $(".thumbs li a").click(function () {
        //$('div.container').toggleClass('on');
        var index = $(".thumbs li a").index(this);
        $("div.container img[src^='img']").replaceWith("img" + index + ".jpg");
    });
});

It doesn't does absolutely nothing. I don't think to understand properly the .replaceWith method.

Also, the commented line works fine when it's alone... when the rest of code is present div.container don't change its class. Is this related to the way I declare the variable?

Is this your actual code? "div.container img[src^="img"]" is a syntax error. Watch your quotes. Also, replaceWith() does not do what you think it does. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 23, 2013 at 18:30
Possible duplicate question: stackoverflow.com/questions/17799984/duplicate-image-in-gallery/… — seymar
– seymar, Commented Jul 23, 2013 at 18:32

Brad M · Accepted Answer · 2013-07-23 18:31:26Z

3

You aren't replacing the attribute, you are replacing the img element.

you need to set the attribute with .attr('src', value).

replaceWith() is for replacing elements with other html elements.

answered Jul 23, 2013 at 18:31

Brad M

7,9101 gold badge25 silver badges40 bronze badges

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

1 Comment

Arkana Over a year ago

That's, that's it what I was searching for! Thanks :)

seymar · Accepted Answer · 2013-07-23 18:36:12Z

3

Keep it simple, get rid of the index. Just get the src. Use this code:

$(document).ready(function() {
    $(".thumbs li a").click(function () {
        //Get the src of the clicked image
        var src = $(this).find('img').attr('src');

        //Set the src to the container image
        $("div.container img").attr('src', src);
    });
});

Demo: http://jsfiddle.net/Stijntjhe/HvTpv/5/

answered Jul 23, 2013 at 18:36

seymar

4,0736 gold badges28 silver badges31 bronze badges

8 Comments

seymar Over a year ago

It's hard to see it working without working images. Use Chrome's console to inspect the element.

Alnitak Over a year ago

the code would also benefit from event delegation - use $('.thumbs').on('click', 'li a', ...)

eded Over a year ago

this is the answer. more concise

Alnitak Over a year ago

not least because using .index() will require an off-by-one adjustment because it's zero-based.

Arkana Over a year ago

I like your solution too, is even more elegant. I'll give the accepted answer to Brad because it match more with the question (for other users who wants to do something with the .index method), but thank you very much indeed ;)

|

Collectives™ on Stack Overflow

Replace attribute with an index value in jQuery

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related