jQuery ID Selection dynamic

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

I would have a javascript array that holds all the object ids. Then you can just loop through the array and for each id do the work you want to do.

Answer 2

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.

Answer 3

Use jQuery.live() for "permanent" event handlers (in case you are dynamically adding images to the page) or use jQuery.each() for iterating through all instances.

In the end it would be something like this (without using live events):

$("a:has(img.my_image)").each(function(){
    $(this).hover(
        function(){$(this).slideDown();},
        function(){$(this).slideUp();}
    );
});