How to select the next div that does not have a certain CSS class

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

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

function move() {
    if( eventNext ) {
        if( eventNext.id !== 'button' ) {
            eventNext.className = 'solidBorder';
        }
        eventNext = eventNext.nextElementSibling;
        if( eventNext ) {
            eventNext.className = 'dashBorder';
        }
    }
}

---

.dashBorder {
    border: 2px dashed blue;
}
.solidBorder{
    border: 2px solid blue;
}

---

or with jquery

var eventNext = $("#button").bind("click", move);

function move() {
    if( eventNext.length ) {
        if( eventNext.attr('id') !== 'button' ) {
            eventNext.attr( 'class', 'solidBorder' );
        }
        eventNext = eventNext.next();
        if( eventNext.length ) {
            eventNext.attr( 'class', 'dashBorder' );
        }
    }
}

---

if you need to support browsers that dont support nextElementSibling, use this functoin instead.

function next( elem ) {
    while( (elem = elem.nextSibling) && (elem.nodeType !== 1) );
    return elem;
}

Answer 2

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.

Answer 3

This would be easier if you used a js framework like jquery. It's as simple as adding a reference to your head like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Using jquery, the code would be

var lastChanged;

$(document).ready(function() {
    lastChanged = $('#item1');

    $('#button').click(function() {
        $(lastChanged).css("border", "1px solid #000");
        $(lastChanged).next().css("border", "1px dashed #000");
        lastChanged = $(lastChanged).next();
    }); 
});

Here it is on jsfiddle - http://jsfiddle.net/JKYue/

Answer 4

see if this help to get you started

  <button onclick="nextItem()">Click me</button>


  var nextItem = (function() {

   var arr_item, arr_len, intIdx, currentItemInt;

   arr_item = ["item1", "item2", "item3"];

    arr_len = arr_item.length;
    intIdx = -1;
    currentItemInt = "";

    return function(){

       for (var j= 0; j < arr_len; j++) {

          var elm = document.getElementById(arr_item[j]);
          var os = (elm.currentStyle) ? elm.currentStyle["borderStyle"] : window.getComputedStyle(elm,"").getPropertyValue('border-top-style');

          if(os == "dashed"){
            intIdx = j;
            //alert(j)
            currentItemInt = arr_item[j + 1];
          }
   }

// alert(arr_item[intIdx]) 

   if(intIdx < arr_item.length-1){

     document.getElementById(arr_item[intIdx]).style.border = "white dashed";
     document.getElementById(currentItemInt).style.border = "black dashed";

   }
}
}());