I am trying to implement a slideshow in jQuery where I have all images and their description in a hidden element with the ID contain
Here I want to get all of the containing elements ( img
span
) pairs so I can iterate them. But issue is:
var slides = $('#contain').children(); //[object Object]
console.log(slides);
//console.log(slides.get(0)); //< this is also not working
This is returning [object Object]
however I want the element as in DOM elements so I can select details, iterate them etc.
Can any please help how can I get that?
Complete code:
function startSlideShow(interval) {
var slides = $('#contain').children();
console.log("0: " + slides);
for (var i = 0; i < slides.length; i++) {
setTimeout(
function () {
var slide = $(slides[i]).children();
$('#currentImage').attr('src', slide[0].src).fadeIn(interval * 100);
$('#slideDesc').html(slide[1].innerHTML).fadeIn(interval * 100);
}, interval * 1000);
}
}
in the html:
<article id="contain">
<div class="image">
<img src="http://i.imgur.com/925p6M5.jpg" />
<span>1Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>
<div class="image">
<img src="http://i.imgur.com/dbBu5rk.jpg" />
<span>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>
<div class="image">
<img src="http://i.imgur.com/VFxPGEi.gif" />
<span>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>
</article>
Problem with this is it is throwing me errors like: Uncaught TypeError: Cannot read property 'src' of undefined
You can use $.each
slides.each(function(){
console.log($(this));
});
You may try this
var slides = $('#contain').children().get();
console.log(slides); // array of dom elements
console.log(slides[0]); // first dom element
Or
$('#contain').children().each(function(k, v){
console.log(v);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.