CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorseach
Augie Luebbers
Augie Luebbers

Reputation: 308

How to loop over elements in a div using .each?

I've tried reading over jQuery's api, but it's only about my second time employing jQuery so I've found myself a bit lost.

I've a div setup with a list of images underneath it.

<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>

So I first selected the div by using:

var slides = $("#slides");

But from there I have no idea which direction to head in. How do I select the individual items inside of the div? Any help or guidance is much appreciated!

Upvotes: 1

Views: 1363

Answers (7)

Manish Tuteja
Manish Tuteja

Reputation: 205

You can iterate over each <img> using $("#slides img").each

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

Upvotes: 0

Ema
Ema

Reputation: 21

Using the variable you already created:

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

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You can use find or contextSelector to get the children.

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

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

If you want to iterate over the images, then just use an each loop to target each image specifically.

If you want to select a specific image.

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

Upvotes: 2

Learning
Learning

Reputation: 305

You have 2 choices, .find() or .children(), and .children('img') is the same as .find('> img')

var slides = $("#slides");

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

Upvotes: 0

Rastalamm
Rastalamm

Reputation: 1782

Give this a shot... 

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

console.log(slides);

That logs an array of all the img elements

Upvotes: 0

Santiago Hern&#225;ndez
Santiago Hern&#225;ndez

Reputation: 5636

like this

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

Upvotes: 0

gavgrif
gavgrif

Reputation: 15489

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

Upvotes: 0

Related Questions