jquery .attr() returning as undefined

Question

I have the following jQuery code below:

My Html:

<div class="input-group top_buffer_small">
    <label class="col-md-3 col-sm-3 text_right top_buffer_mini">Available Colors:</label>
    <div class="col-md-9 col-sm-9 text_right">
        <table id="availColors" align="center">
            <?php 
                //instantiate color class
                $colors = $Item->getColors();
                $colorCount = $Item->getColorCount();
                if($colorCount > 0){
                    //create a mod since we only want to show 4 colors per row.
                    $remainder = $colorCount%4;
                    $x=0; //counter variable
                    if(is_array($colors)){
                        foreach ($colors as $key=>$value){
                            foreach ($value as $color) {
                                if($remainder == 0){
                                    //if we are at 0, make a new row
                                    echo "<tr>";
                                }
                                //print_r($Item->getProductVariations($color));
                                ?>
                                <td style="background-color:#<?php echo $color;?>" data-pictures="<?php echo htmlspecialchars(json_encode($Item->getProductVariations($color))); ?>" data-directory="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/';?>"></td>
                                <?php 
                                if($remainder == 3){
                                    //end the row
                                    echo "</tr>";
                                }
                            //$x++;
                            }
                        }
                    }
                }
            ?>
        </table>
    </div>
</div>

Basically, I am trying to get the array values which are being passed from the to my javascript. After I get the values, I am trying to make all the image thumbnails change to the pictures on click of a color.

This is the div I am aiming to change the picture thumbnails:

<div class="row">
    <div class="featured_container_small" id="productThumbnails">
            <h5>Other Views</h5>
            <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
            <!-- <div class="col-md-3 buffer_bottom"><img src="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/'.$smallimage1?>" class=" center_image responsive_image"></div> -->
            <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
            <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
            <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>  
        </div>
        <div class="row">
            <div class="col-md-12"><nbsp></nbsp></div>
        </div>
        <div class="clear"></div>
</div>

Then this is my jquery:

$(function(){
    $("#availColors td").click(function(){
        var imageDirectory = $(this).attr('data-directory');
        var pictures = $(this).attr('data-pictures');
        var pictureArray = JSON.parse(pictures);
        var productThumbnails = $("#productThumbnails img");
        var thumbnailCount = productThumbnails.length;
        var keys = Object.keys(pictureArray);
        var pic = "";
        var src="";

        for (var i = 0; i < keys.length; i++) {
            pic = pictureArray[keys[i]];     
            productThumbnails[i].attr("src",imageDirectory+pic+".jpg");
        }
    });
});

When I perform my click function, an error returns saying "undefined is not a function".

I don't know why its doing this. Some help please.

Answer 1

When you iterate over the images collection, productThumbnails[i] returns the underlying HTMLImageElement which doesn't provide the attr() method. Try to wrap it with jQuery instead:

$(productThumbnails[i]).attr("src",imageDirectory+pic+".jpg");

Also, when using jQuery, the best way to access arbitrary data associated with your DOM elements is using the data() method:

var imageDirectory = $(this).data('directory');
var pictures = $(this).data('pictures');

As a bonus, you'll also get JSON deserialization out of the box and there's no need for JSON.parse():

var pictureArray = $(this).data('pictures');