Как перебрать элементы в div, используя .each?

Question

Я пробовал читать api jQuery, но это касается только того, что я второй раз использовал jQuery, поэтому я немного потерял себя.

У меня есть настройка div со списком изображений под ним.

<div id="slides"> 
    <img src="images/casting1.jpg" alt="Casting on the Upper Kings"> 
    <img src="images/casting2.jpg" alt="Casting on the Lower Kings"> 
    <img src="images/casting3.jpg" alt="Casting at another location!"> 
    <img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn"> 
    <img src="images/fish.jpg" alt="Catching on the South Fork"> 
    <img src="images/fish1.jpg" alt="Catching on the North Fork"> 
    <img src="images/lures.jpg" alt="The Lures for Catching"> 
</div> 

Так что я выбрал первый DIV с помощью:

var slides = $("#slides"); 

Но оттуда я понятия не имею, в каком направлении к голове в разделе Как выбрать отдельные элементы внутри от дел.? Любая помощь или руководство очень ценится!

Answer 1

Вы можете использовать find или contextSelector, чтобы получить детей.

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

var allImages = $slides.find('img'); or // $('img', $slides) 

Если вы хотите перебрать изображения, а затем просто использовать each цикл для целевого каждого изображения конкретно.

Если вы хотите выбрать определенное изображение.

$('img', $slides).eq(1) // Will get you the second image in the div. 

Answer 2

$('#slides img').each(function(){ 
//code required using $(this).... to target each particular image of that iteration 
}) 

Answer 3

У вас есть 2 варианта, .find() или .children() и .children('img') такое же, как .find('> img')

var slides = $("#slides"); 

slides.children('img').each(function (idx, elem) { 
    console.info(idx, elem); 
}); 

Answer 4

как этот

slides.find("img").each(function(index, element){ 
    //keep in mind, element is a HTMLElement 
    //not a JqueryObject, in order to manipulate 
    //it with jquery use: $(element) 
}) 

Answer 5

Дайте этому выстрел ...

var slides = $("#slides > img").each(function() {}); 

console.log(slides); 

Это регистрирует массив всех img элементов

Answer 6

Вы можете перебирать каждый <img> с помощью $("#slides img").each

$("#slides img").each(function(){ 
    // do something 
}); 

Answer 7

Используя переменную, которую вы уже создали:

slides.children('img').each(function(){ 
    // here use this for the HTML element or $(this) for the jQuery wrapped one 
});