Javascript - Jquery on the fly id retrieving
<p>I've made a JS utility with jQuery that gives IDs to <code>div</code> elements and to links, which are coordinated.</p>

<p>Example:</p>

<pre><code>div id="container"
div id="1"
div id="2"

div id="links"
a name="1"
a name="2"
</code></pre>

<p>So once the page is loaded, when I click on the first link (name="1") it is supposed to show the first div (id="1").</p>

<p>But it seems that as my IDs are created on the fly, the function doesn't seem to find the right div.</p>

<p>Here's my function:</p>

<pre><code>$("#video_grid .grid_item a").each(
        function(i) {

            /* FINDING 'A' AND GIVING THEM NAME */

            $(this).addClass("item" + (i + 1));
            $(this).attr("name", "#" + (i + 1));

            /* BACKGROUND */

            $(this).css("background-image",
                    "url(images/visu_" + (i + 1) + ".jpg");
            $(this).hover(
                    function() {
                        $(this).css("background-image",
                                "url(images/visu_hover_" + (i + 1) + ".jpg")
                    },
                    function() {
                        $(this).css("background-image",
                                "url(images/visu_" + (i + 1) + ".jpg");
                    });
        });

/* FINDING DIV GIVING THEM IDS */

$("#capsule_player &gt; div").each(function(i) {
    $(this).addClass("item#" + (i + 1));
});

/* HERE'S THE PROBLEM */

$("#capsule_player div:first-child").css("display", "block");
/* appel la div correspondante avec la video */
$(".grid_item a").live("click", function() {
    var divname = $(this).attr("name");
    alert(divname);
    /* WORK FINE TIL HERE */

    /* THIS IS THE REAL PROBLEM */

    $(".item" + divname).show("slow").siblings().hide("slow");

    /* ALERT IF YOU FIND THE DIV WITH THE ID, DOES NOT WORK */

    if ($(".item" + divname)[0]) {
        alert('tonton');
    }

});
</code></pre>

<p>I'm using jQuery, basic HTML and CSS, and PHP is not allowed.</p>
