Question

Not Sure if this can be done, the way I am approaching it. Here goes nothing. I am echoing images from a php upload script, each img has a unique ID which starts at A1,A2,A3,A4 and so on. Now I can select That img ID and create the action I want, however I have to do it for every ID, I wont be able to do this as new ones are created, How would I tell jQuery to do the same thing to A1 (A2,A3) Some sort of Increment.

JS

$(document).ready(function(){
   $("#1 ").hover(
   function(){
    $("#A1").slideDown();
   },

   function(){
     $("#A1").slideUp();
   });
});

$(document).ready(function(){
   $("#2 ").hover(

   function(){
     $("#A2").slideDown();
   },
   function(){
     $("#A2").slideUp();
   });
});

PHP

$i= 0; while(($file = $myDir->read()) !==false){
  if(!is_dir($file)){
    $i++;
    //echo "Filename: $file<br/>";
    echo "<div id='images'>";
    echo "<p>";
    echo "<a id='$i'href=\"display/$file\"><img src=\"thumbs/$file\" /> </a>\n";
    echo "</p>";
    echo"</div>";
    echo "<div id='imageHolder' >";
    echo "<img id='A$i' style='display:none' src=\"display/$file\" />";
    echo"</div>";
  }
}

Answer 1

How are your new items being generated? On page load, or are you using an ajax request through jQuery? In either case you can select all elements that start with a certain value (i.e. “A”) this way:

$("a").hover(
    function(){
        $(this).find(img[id^='A']).slideDown();
    },
    function(){
        $(this).find(img[id^='A']).slideUp();
});

Somebody feel free to help me out if I’m off here.

UPDATE

Thanks guys – What about something like this?

$("a").hover(
    function(){
        id = $(this).attr('id');
        $("#A"+id).slideDown();
    },
    function(){
        id = $(this).attr('id');
        $("#A"+id).slideUp();
});

This looks for all links on the page and uses the ID (per your code) to look for the slide items. If you’re creating them dynamically you’ll want to put this inside a function and call it again on ajaxComplete.