JQuery - Give every <div> inside a <div> an ID (array?)

Question

Day 2

The html...

<div id="galleria">
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffbehaelter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffbehaelter.jpg" ></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_abfuellnadel.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_abfuelllnadeln.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffbehaelter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffbehaelter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffverteiler.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffverteiler.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_luftverteiler.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_luftverteiler.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_praezisionsaufnahme.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_praezisionsaufnahme.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_praezisionshalter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_praezisionshalter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_schlauchreduzierung.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_schlauchreduzierung.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_setzrohr.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_setzrohr.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_triclamp_verschluss.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_triclamp_verschluss.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_verschluss_adapter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_verschluss_adapter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_winkelreduzierung.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_winkelreduzierung.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_zangenhalter.jpg"><img  src="../Bens_Internet_Erik/bens_img/thumbnail_zangenhalter.jpg"></a></div>
</div>

Get every div inside a div and add them to an array. They should have all an ID so that I can say:

On click Div with ID="1" 
do this

This is for an thumbnail navigation.. My task is to synchronize some div content and I need a way to ask which thumbnail (div) was clicked..

////////////////////////////////////////

It should be like: "Hey! You are #1, you #2, you the #3, #4, #5, youre 6#, youre the #7, #8, #9, sir youre the #10, #11, #12 youre the last .. the #13.

An then this: "Okay.. I clicked thumbnail #4 .. so I fadein the CONTENT for #4 (Whicht contains a caption and some information - its basicly a very width div which will be scrolled at a position (the rest will no be shown, thanx to the overflow:hidden)). And If I click thumbnail #8 the it will show the content for the #8.

Answer 1

Ok, to answer your question, something like this:

$("#galleria div").each(function(index, value) {
    $(this).attr("id", "galleria" + index);
});

should do the trick.

But, that being said, there are better ways to do what you are trying to do, by using things like the "eq" traversing method, ":eq" selector, and "inArray" utility method.

* EDIT *

To clarify how each works here's a fake/simplified version of it:

function each(callback) {
    for(var i = 0; i < elements.length; i++) {
        // next line is the same as callback(i, elements[i]), except it sets "this"
        callback.call(elements[i], i, elements[i]);
    }
 }

As you can see the callback you provide gets called whether you use the arguments or not ... but they'll always get passed to it regardless.

Answer 2

Something like this?

var $divs = $("#galleria div");

or to get which thumbnail was clicked you could write:

$("#galleria .images a").click(function(e) {
    // might want to do this unless you actually want to navigate away
    e.preventDefault(); 

    // href of the anchor clicked pointing to the full size image
    $(this).attr("href");        

    // which thumbnail was clicked
    $(this).find("img");        
});

and if you just want to attach some ID to each div you could write:

$("#galleria div").each(function(index, value) {
    $("div").attr("id", "thumbnail_" + index);
});

Answer 3

Just use the this refence inside the event handler with .index() and .eq() .

<div id="galleria">
   <div id="images">
      <div class="image">
         <a href="#"><img src="image.jpg"/></a>
      </div>
   <div id="thumbnails">
      <div class="thumbnail">
         <a href="#"><img src="image.jpg"/></a>
      </div>
   </div>
</div>

---

var $galleria = $("#galleria");

$galleria.on('click','.thumbnail',function(event){
   var thumb, image;
   // Index of div that user clicked...
   $thumb = $(this);
   // get the corresponding image...
   $image = $galleria.find('#images .image').eq(thumb.index());

});