简体   繁体   中英

Convert [object Object] into DOM element

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

EXAMPLE.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM