Gather div class into a javascript array

Question

My current html looks like this:

<div class="wrapper" style="display:block;" id="item0"><!--- Stuff --></div>
<div class="wrapper" style="display:none;" id="item1"><!--- Stuff --></div>
<div class="wrapper" style="display:none;" id="item2"><!--- Stuff --></div>
<div class="wrapper" style="display:none;" id="item3"><!--- Stuff --></div>
<div class="wrapper" style="display:none;" id="item4"><!--- Stuff --></div>

And then I have a back/forward link which call the corresponding javascript function, it looks like this:

 function switchNextItem() {  
    var element0 = document.getElementById('item0');
    var element1 = document.getElementById('item1');
    var element2 = document.getElementById('item2');
    var element3 = document.getElementById('item3');
    var element4 = document.getElementById('item4');

    if (element0.style.display == 'block')  {
        element0.style.display = 'none';  
        element1.style.display = 'block';
    } else if (element1.style.display == 'block') {
        element1.style.display = 'none';
        element2.style.display = 'block';
    } else if (element2.style.display == 'block') {
        element2.style.display = 'none';
        element3.style.display = 'block';
    } else if (element3.style.display == 'block') {
        element3.style.display = 'none';
        element4.style.display = 'block';
    } else if (element4.style.display == 'block') {
        element4.style.display = 'none';
        element0.style.display = 'block';
    }
}

Are there any possibilities for me to make this more dynamically?

Thanks! (I'm not familiar with javascript).

Would you be interested in diving into the simple world of jQuery? — Phil
– Phil, Commented Jul 11, 2011 at 17:50

pimvdb · Accepted Answer · 2011-07-11 20:47:05Z

3

You'd love jQuery: http://jsfiddle.net/TCQum/.

function switchNextItem() {
    $('div.wrapper:visible')  .hide()    .next()      .show();
//     select visible div   | hide it | goto next | show that one
}

Edit: A more precise one:

function switchNextItem() {
    var next = $('div.wrapper:visible:eq(0)')
               .hide()
               .next('div.wrapper'); // next one will be stored in next

    if(next.length === 0) { // if there is no next one, show first one agan
        $('div.wrapper:eq(0)').show();
    } else { // otherwise show next one
        next.show();
    }
}

And with .prev:

function switchNextItem() {
    var prev = $('div.wrapper:visible:eq(0)')
               .hide()
               .prev('div.wrapper'); // prev one will be stored in prev

    if(prev.length === 0) { // if there is no prev one, show last one
        $('div.wrapper:last').show();
    } else { // otherwise show prev one
        prev.show();
    }
}

edited Jul 11, 2011 at 20:47

answered Jul 11, 2011 at 17:50

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Curtain Over a year ago

Gah! I've been on the Java, C# and C++ sides too much! Thank you, I'll check this out.

James Montagne Over a year ago

This is not equivalent if more than one is block (may not be possible). You also have to handle the wrap around of the last case there, next won't wrap to the first item.

Curtain Over a year ago

You two are the best. Both solutions are working. However, pimvdb, I'm wondering if there is any $('div.wrapper:visible') .hide().previous().show(); way to go where I have a back button?

pimvdb Over a year ago

@Julian Assange: It's called .prev :)

pimvdb Over a year ago

@Julian Assange: Quite the same, but instead of :eq(0), use :last. (And, instead of :eq(0) you could also use :first if that clears things up.)

|

James Montagne · Accepted Answer · 2011-07-11 17:53:15Z

3

Something like this should work.

function switchNextItem() {  
    var items=['item0','item1','item2','item3','item4'];

    for(var i=0;i<items.length;i++){
        var element = document.getElementById(items[i]);

        if (element.style.display == 'block')  {
            element.style.display = 'none';  

            var nextElement = document.getElementById(items[(i+1) % items.length]);
            nextElement.style.display = 'block';

            break;
        }
    }
}

answered Jul 11, 2011 at 17:53

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

3 Comments

pimvdb Over a year ago

+1 for actually moving to the first at the end again, I forgot about that. However, you'd need (i+1) % items.length though.

Curtain Over a year ago

Thanks both of you for two good answers. I will try this out. :)

James Montagne Over a year ago

Good point, updated. As I was typing it I though of that but forgot to check if the parentheses were needed.

Collectives™ on Stack Overflow

Gather div class into a javascript array

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related