accessing the data attribute of images with a loop

[Violet_82]

Hi there, I am in a bit of a situation. I have a few images that I have inserted in my html using javascript. The url of the images are stored as strings in json object notation and to access them in the script I had to have 2 nested for in loops.
Now, the relevant code in the function is this:

function populateHTML(booleanVar){
...
for(i in whatever ){//accessing the top of json
            for(j in whatever[i]){////accessing second level of json where the images are               
                if(booleanVar){
                    myHTML += '<div id="myImages"><a href="javascript:void(0)"><img src="' + whatever[i][j].thumb + '"  data-value="' + bestVal + '"alt="" ></a></div>';
                }
                else{
                        ...

                        }
                    }
                }

So I end up in a situation like the below.

...
<div id="myImages">
    <img src="image1.jpg" data-value="10">
    <img src="image2.jpg" data-value="11">
    <img src="image3.jpg" data-value="12">
    <img src="image4.jpg" data-value="13">
    <img src="image5.jpg" data-value="14">
    <img src="image6.jpg" data-value="15">
    <img src="image7.jpg" data-value="16">
</div>
...

Now the first time the page load I have a boolean variable set to true so that this bit

{myHTML += '<div id="myImages"><a href="javascript:void(0)"><img src="' + whatever[i][j].thumb + '"  data-value="' + bestVal + '"alt="" ></a></div>';

runs and populate the html with images. After that I call populateHTML() from somewhere else passing booleanVar as false because I don't want to re-insert the images but just update their data-value attribute which will be done in the above else{} statement but this turned out to be a nightmare.
In the else statement - let's not forget we are in a loop still - I need to access the data-value of each image and change it. I have tried different ways to access the current image but I don't seem to be able to do it. Few of my attempts were:

else{                       
                        $("vehicle_row a img").attr("data-value", bestVal);
                        ...

and then I tried this

else{
                $("vehicle_row a img").data("value") === bestVal;   
                ...

but I have a feeling that the above don't select the current version of the image. Is there any such a selector as $("vehicle_row a this.img")... which allows me to select the current image?
Any suggestion will be much appreciated. One thing only: the code above is just an extract. The whole function is about 100 lines and I didn't copy the whole thing because it isn't necessarily relevant to what I am trying to achieve. Also I can't really re-engineer it,so I will need to go with what I have
thanks

[blocblue]

It's quite difficult to follow your code, with various sections omitted.

Could you add an id attribute to each image based on the value of i and j in the loops and use this in the else part of your loop to retrieve the image by id?
$('#image-id').data('value');

[Violet_82]

Hi there, thanks. SOrry about the omissions, but as I said the function is quite
long and I thought giving out just the important bit will have avoid confusion. Maybe I was wrong, in any case, here's
the full version and a different approach I have attempted (highlighted in bold ** ** - there is no way to highlight things in different colours oddly enough). Also I haven't included the json notation, because it is enormous

function getVehicleData(booleanVar, stringValue, BestLowerValue, imageLoadedIn){    
    var whatever  = cars_data.seeTheProducte.Product;//accessing 2 levels above the images in json  
    var highest;
    var lowest;
    var i;
    var j;
    var k;
    var htmlToAdd;          

    **var $theImages;**
    if(booleanVar){
        $("#main_div").children().remove();
    }   
    **else{     
        $theImages = $(".myImage a img").eq(0);      
         var currentImage;
        var index;       
    }**
        for(i in whatever ){//access first level of json
            htmlToAdd = '<div class="vehicle_family"><p>' + whatever[i].text + '</p>'; 
            for(j in whatever[i]){//access second level of json, that's where the images are
                var optimalValue;
                var lows;
                var highs;
                var nameOfCars;
                var text = whatever[i].text;                
                for(k in whatever[i][j]){//access third level of json               
                    var valOfCurrentImg = Number(whatever[i][j][k][stringValue]);
                    if(!(isNaN(valOfCurrentImg))){                  
                        if(BestLowerValue){
                            if(optimalValue == null || valOfCurrentImg < optimalValue){
                                optimalValue = valOfCurrentImg;
                            }
                        }
                        **else {
                            if(optimalValue == null || valOfCurrentImg > optimalValue){
                                optimalValue = valOfCurrentImg;
                            }**
                        }
                        if(valOfCurrentImg < lowest || lowest == null)  lowest = valOfCurrentImg;
                        if(valOfCurrentImg > highest || highest == null) highest = valOfCurrentImg;                     
                    }                   
                }               
                if(!(j == 'text')){                 
                    lows = whatever[i][j].lowgrade;//these are taken from the json
                    highs = whatever[i][j].highgrade;//these are taken from the json
                    nameOfCars = whatever[i][j].rangename;          
                if(booleanVar){
                    htmlToAdd += '<div class="myImage"><a href="javascript:void(0)"><img src="images/' + whatever[i][j].thumb + '"  data-value="' + optimalValue + '"data-low="' + lows + '"data-high="' + highs + '"data-name="' + nameOfCars + '"alt="" ></a></div>';
                }
                **else{
                            console.log("best values are " + optimalValue + " lowgrade are " + lows + " car names are " + nameOfCars + " high grades are " + highs);                            
                            $theImages.attr("data-value", optimalValue);                            
                            $theImages.attr("data-low", lows);
                            $theImages.attr("data-name", nameOfCars);
                            $theImages.attr("data-high", highs);                            
                            currentImage = $theImages.index();                          
                            index = currentImage + 1;
                            console.log(" index is " + index);
                            $theImages = $(".myImage a img").eq(index);                         
                            console.log("currentImage is " + currentImage);                 
                    }   **      
                    optimalValue = null;
                }
            }           
            htmlToAdd += '</div>';
            if(booleanVar){
                $("#main_div").append(htmlToAdd);
            }           
        }

}