Question

<div id="button">
Click me
</div>

<div id=item1> //loads with a dashed border
</div>

<div id=item2> //loads with a solid border
</div>

<div id=item3> //loads with a solid border
</div>

Script part:

var eventNext = document.getElementById("button");
eventNext.addEventListener("click", move, false);

function move()
{

}

What would I put in the move function to get the next div item that does not have a dashed border, and make it dashed, and current item’s border to solid? (if there is a next item)?

Answer 1

Here’s one way with jQuery, if using this library happens to be an option for you:

First, give each div which can become dashed, a “marker class”

<div id="item1" class="itemWhichCanBeDashed">
    //loads with a dashed border
</div>
<div id="item2" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>
<div id="item3" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>

Then create a dashed border style:

<style type="text/css">
    .dashed { border-style: dashed; }
</style>

Then, to dash the next div that’s not already dashed:

$("div.itemWhichCanBeDashed:not(.dashed):first").addClass("dashed");

This selects all divs with the class itemWhichCanBeDashed, but does not have the dashed class attached, then takes the first one, then adds the class dashed

If you want the first div to already be dashed, then just render it with the dashed class.

I’m not sure exactly what the requirement of making the current div solid is, but it should be a simple extension of this.

EDIT

To host jQuery in your project, you can link to it from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

If your user has recently visited a site that was linking to the same file, it’ll likely be cached. If not, it’s only about a 92K download.