accessing the data attribute of images with a loop

[dupalo]

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

[Fotiman]

You are missing a space between the end of the data-value attribute and the start of the alt attribute. Thus your output looks like this:

... data-value="..."alt="" >

Without the space, you probably won't find your attribute. :)

[Fotiman]

Replied too quickly. That is a problem, but I don't think it's the problem you're stuck on.

In your original loop, you're appending to a string. I assume at some point later, you end up appending that to the document, but it's important to recognize that you don't actually have a DOM reference within your loop. Therefore, when you're looping through again later, all you've got is your JSON object. What you might want to do is find the '#myImages' element before your loop, then find the first img child, then iterate through each sibling. Is myImages a unique id? If not, then you've got to correct that first.

[dupalo]

Fotiman, tanks for getting back to me. Yes I think there might be few typos here and there - sorry - like the errors you picked up, I think I might have missed something while I was copying and pasting. The code is correct in the original script though. Also, about the id myImages, I apologize, it's a class and not an id, thanks for pointing that out, again I must have changed it while pasting in here.
You're right when you say that eventually I append it to the document, but only when createDom is true.
Unfortunately I can't do all this before the loop: I mean, I could certainly find .myImages before the loop but the values of the data attributes are set within the loop so if I want to change them I will have to do it within the loop. The reason for that is because of the json data: in order to get to the images and to other string values I need to get out of it, I have to "dig" deep, hence the several loops (in the script I actually have 3 nested loops, I haven't included the 3rd here because it is not needed for the images). That's why I was hoping to find a clever selector that could target the current image inside the loop.
thanks

[Fotiman]

What I meant was get the myImages element before the loop, then within the loop iterate over the img elements within myImages. For example:

var myImages = $('.myImages'); // you probably need something more specific
var imgs = myImages.find('img');
var img = imgs.first();

for (...) {
  for (...) {
    img.attr('data-value', bestVal);
    imgs = imgs.slice(1);
    img = imgs.first();
  }
}

Obviously, you'd want some checks in there, but the concept is basically just find the list of images first (outside of the loop) and then each time through the loop, move to the next img element.

[dupalo]

ok thanks, I will give it a go. DO I somehow need to advance the images within the loop? I mean how does the loop moves through images though?

[Fotiman]

Your loop would remain unchanged from what you already have (I just omitted that from my example to keep it simple). So essentially, when booleanVar is true, you're going to generate a string (which then later gets added as elements in the DOM), and when it's false, you're going to modify those existing elements by first finding them and then as you're looping you also iterate through that list of elements (in my example, that's done by removing an element from the list, and then getting the next one in the list using slice and first).

[dupalo]

ok clear, thanks for tat I will give it a go!