JQuery - присваивайте каждому <div>внутри <div>идентификатор (массив?)

Question

День 2

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>

Получите каждый div внутри div и добавьте его в массив.Они должны иметь все идентификаторы, чтобы я мог сказать:

On click Div with ID="1" 
do this

Это для навигации по миниатюрам. Моя задача - синхронизировать некоторый контент div, и мне нужен способ узнать, какой эскиз (div) былнажал ..

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

Это должно быть похоже на: «Эй! Вы # 1, вы # 2, вы # 3, # 4, # 5, вы 6 #, вы # 7, # 8, # 9, сэр, вы # 10, # 11, # 12, вы последний .. # 13.

А потом вот это:для # 4 (который содержит заголовок и некоторую информацию - в основном это очень широкий div, который будет прокручиваться в позиции (остальное не будет показано, спасибо переполнению: скрыто)).И если я нажму на миниатюру № 8, она покажет содержимое для # 8.

Answer 1

Хорошо, чтобы ответить на ваш вопрос, примерно так:

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

должен сделать трюк.

Но, как говорится, есть лучшие способы сделать то, что вы пытаетесь сделать, используя такие вещи, как метод обхода "eq", селектор: eq и служебный метод inArray.

* РЕДАКТИРОВАТЬ *

Чтобы пояснить, как каждый из них работает, вот его поддельная / упрощенная версия:

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]);
    }
 }

Как видите, обратный вызов, который вы предоставляете, вызывается вне зависимости от того, используете ли вы аргументы или нет ... но они всегда будут переданы ему независимо.

Answer 2

Что-то вроде этого?

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

или чтобы получить миниатюру, которую вы нажали, вы можете написать:

$("#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");        
});

и если вы просто хотите прикрепить какой-то идентификатор к каждому элементу, вы можетенаписать:

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

Answer 3

Просто используйте этот refence внутри обработчика событий с .index () и .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());

});