Ориентация на конкретный DIV с помощью JQuery

Question

У меня есть это в моем HTML:

<div id="slideshow"> 
    <div class="image"> 
      <img src="http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Bart"/> 
      <div class="caption">Bart Simpson</div> 
    </div> 
    <div class="image"> 
      <img src="http://upload.wikimedia.org/wikipedia/en/e/ec/Lisa_Simpson.png" alt="Lisa"/> 
      <div class="caption">Lisa Simpson</div> 
    </div> 
    <div class="image"> 
      <img src="http://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png" alt="Homer"/> 
      <div class="caption">Homer Simpson</div> 
     </div> 
    </div> 

В моей Jquery я добавить класс с текстом в классе изображения. Однако, используя:

$(".image").append(data[index]); 

где data - массив, содержащий новый класс, код входит во все экземпляры образа класса. Теперь я хочу сделать следующее: на основе индекса я хочу добавить новый код в определенный класс изображения. Поэтому для индекса 0 я хочу добавить код в класс с Bart, для индекса 1, в класс с Lisa и т. Д.

Я не могу использовать операторы if, поскольку количество изображений в HTML может измениться, но не файл js.

Answer 1

Вы можете использовать функцию jquery .eq() для выбора элементов на основе их индекса.

$('.image').eq(index).append(data[index]); 

Я предполагаю, что вы хотите что-то подобное.

Answer 2

Вы можете передать функцию .append():

$(".image").append(function(index) { 
    return data[index]; 
}); 

Такие функции передаются индекс элемента в качестве первого параметра. (Текущее содержимое HTML передается как строка в качестве второго аргумента, но мой пример этого не требует.)

Answer 3

Каждая функция будет запускать функцию для каждого элемента, который соответствует выбранному, в данном случае .image. Каждый раз, когда выполняется функция each(), индекс передается в var index. Так что это:

$(".image").each(function (index, element) { 
    $(element).append(data[index]); 
}); 

будет добавлять правильные данные в div.

Answer 4

Если вы хотите для DIV с классом «образ» в определенный индекс вы можете сделать:

$('.image')[index].append(data[index]) 

или

$('.image').eq(index).append(data[index]); 

Если вы хотите сделать это для всех дивы с классами изображений вы должны использовать цикл

в этом случае

$('.image').each(function(index,current)){ 
    $(current).append(data[index]); 
}