Change value of SRC within .each function

Question

I am trying to get the values of an element and then use it in another element within the same parent element using .each() function. However, this seems not to work. Here are the codes I am using. Please tell me where I am doing wrong.

HTML:

<table>
    <tr class="item">
        <td>
            <img class="thumbnail" src="http://www.domain.com/images/image1.jpg">
        </td>
        <td>
            <p class="img">http://www.domain.com/images/image001.jpg</p>
        </td>
    </tr>
    <tr class="item">
        <td>
            <img class="thumbnail" src="http://www.domain.com/images/image2.jpg">
        </td>
        <td>
            <p class="img">http://www.domain.com/images/image002.jpg</p>
        </td>
    </tr>
</table>

JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        $('.item').each(function() {
            $(this).find('.thumbnail').attr('src', $(this).find('.img').html());
        )}; 
    )};
</script>

What I want to do is get the html of the <p class="img"> (which contains the url to an image) and change the src of <img class="thumbnail"> with that on page load.

Please help

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

Fiddle

You had small typo error in your code. The closure of the functions }); was like )}; with inverted };

By the way .prop is preferred instead of .attr, you can read more here about it.

$(document).ready(function() {
        $('.item').each(function() {
            $(this).find('.thumbnail').attr('src', $(this).find('.img').html());
        }); 
   });

edited May 23 '17 at 10:25

Community

1
1

answered Jul 05 '13 at 11:13

Sergio

28,539
11
85
132

Mooseman · Accepted Answer · 2013-07-05T11:20:46.723

$(document).ready(function() {
     $('.item').each(function() {
         $(this).find('.thumbnail').prop('src', $(this).find('.img').html());
     }); 
});

At the end you had )}; instead of });. Also, .prop is preferred to .attr. quoting from the .prop documentation:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

It should be noted that in your specific situation, you are loading images after the page loads and after the jQuery fires. This causes a huge delay for the user. The thumbnails would load more quickly than a large image, but, at minimum, there is a flash of a broken image.

score 0 · Answer 3 · answered Jul 05 '13 at 11:20

0

Typo error

<script type="text/javascript">
        $(document).ready(function () {
            $('.item').each(function () {
                $(this).find('.thumbnail').attr('src', $(this).find('.img').text());
            });
        });
    </script>

answered Jul 05 '13 at 11:20

Manish Parmar

859
1
11
19

A.T. · Answer 4 · 2013-07-05T11:31:22.600

0

little error check at jsfiddle , use }); instead of )};

edited Jul 05 '13 at 11:31

answered Jul 05 '13 at 11:24

A.T.

24,694
8
47
65

score 0 · Answer 5 · answered Jul 05 '13 at 11:27

0

Working code is:

$(document).ready(function () {
    $('.item').each(function () {
        $(this).find('.thumbnail').attr('src',$(this).find('.img').html());         
    })
});

answered Jul 05 '13 at 11:27

Nono

6,986
4
39
39

Change value of SRC within .each function

5 Answers5