JQuery - Give every <div> inside a <div> an ID (array?)
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_impfstoffv开发者_如何学JAVAerteiler.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.
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.
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);
});
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());
});
精彩评论