I'm attempting to change data depending on the href of the link, but it only executes once

Question

$("a").each(function() { openFile($(this).attr('href')); }

I got this from another question. openFile is a function that switches the img src depending on the file extension of the link.

now if i have this:

<a class="thelink" href="../General Reading/General Reading 1/Luddites/Luddites 4 Summary.pdf"><img class="theimage" src="" alt="icon"/> <div class="thefile"></div></a>
<a class="thelink" href="../General Reading/General Reading 1/Luddites/Luddites 5 Reading.pdf"><img class="theimage" src="" alt="icon"/> <div class="thefile"></div></a>
<a class="thelink" href="../General Reading/General Reading 1/Luddites/Luddites 1 Vocab.ppt"><img class="theimage" src="" alt="icon"/> <div class="thefile"></div></a>    
<a class="thelink" href="../General Reading/General Reading 1/Luddites/Luddites 2 Grammar Preview.ppt"><img class="theimage" src="" alt="icon"/> <div class="thefile"></div></a>

My function is only run once at the end I guess and takes the info from the last url. What I want is to loop through each link and change the info depending on that specific link.

Err hard to explain.

Answer 1

Wouldn't you need to do the .each on the control that contains the a's? not the 'a' control itself?

Answer 2

Either pass this as another argument to openFile, or better yet bind this to openFile by doing something like:

$('a').each(openFile);

and then

function openFile()
{
 //do stuff on $(this)
}

Answer 3

This way the openFile function doesn't know which image to target. Maybe this will work instead?

$("a").each(function() {
  var src = openFile($(this).attr('href'));
  $(this).find('img').attr('src',src);
});

function openFile(href) {
  // do stuff
  // and make sure the src is returned
  return 'something';
}

Or add the image object to the openFile function so you can target it from there:

$("a").each(function() {
  var img = $(this).find('img');
  openFile($(this).attr('href'), img);
});

function openFile(href, img) {
  // do stuff
  img.attr('src', something);
}

Or simply incorporate the openFile functionality to the jQuery call:

$("a").each(function() {
  // do stuff with $(this).attr('href')
  // change $(this).find('img').attr('src',src);
});