Previous and Next Sibling JavaScript

Question

Okay so I've been studying the book JavaScript and jQuery interactive front end development by "Jon Duckett"

Im on page 210 "Previous and Next Sibling" how do i change the li.a attributes in the navigation drop down sub menu, i have removed all white space so that it does not pick up any unwanted textNodes in the HTML like so.

<ul>
  <li>
    <a href="#" class="subLinks" id="subWeb">Web Development</a>
  </li>
  <li>
    <a href="#" id="subGraph" class="subLinks">Graphic Design</a> 
  </li> 
  <li>
    <a href="#" class="subLinks"id="subProto">Prototypes</a>
  </li>
  <li>
    <a href="#" class="subLinks" id="subFun">Fun Stuff</a>
  </li>
</ul>

I added the JavaScript from the book to change the value of the class attributes but I am having trouble with this, it does not work but when I change the id to the <li> , the previous and next siblings disappear. i am confused as the code looks correct and it works on a different web page when i give the <li> an id. But does not seem to be working here which is strange. Any help to get this working would be great thanks

/*Javascript
Previous and Next Sibling for portfolio subLinks,
=====================================================================*/

var startItem = document.getElementById('subGraph');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;

/*change the value of the siblings class Attributes
=====================================================================*/

prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';

/*CSS
============================*/

.checkIcon{
    background-color: teal;
    color:#FFF;
    text-shadow: 2px 2px 1px #3b6a5e;
    border-top:1px solid #7ee0c9;
    border-top: 1px solid #3b6a5e;
    content: '\f00c';
    position: absolute;
    font-family: fontAwesome;
    right: 5px;
    line-height:50px;
    color:#FFF;
}

.altSubLinks1{
    background-color: #FFF;
    color: #000;
}

Answer 1

The fact that your markup is all packed up and unindented (due to the textNodes i know) makes it hard to see that the element you are matching has no siblings.

Take a look at the indented markup:

<ul>
  <li><a href="#" class="subLinks" id="subWeb">Web Development</a></li>
  <li><a href="#" id="subGraph" class="subLinks">Graphic Design</a></li>
  <li><a href="#" class="subLinks" id="subProto">Prototypes</a></li>
  <li><a href="#" class="subLinks" id="subFun">Fun Stuff</a></li>
</ul>

Note that subGraph is the <a> tag that has no siblings. Only the <li> have siblings.

Therefore you must either set the ids on the <li> tags or navigate to them with parentElement .

Example with parentElement :

 var startItem = document.getElementById('subGraph'); var prevItem = startItem.parentElement.previousSibling; var nextItem = startItem.parentElement.nextSibling; prevItem.className = 'checkIcon'; nextItem.className = 'altSubLinks1'; 

 .checkIcon { color:red; } .altSubLinks1 { color:green; } 

 <ul><li><a href="#" class="subLinks" id="subWeb">Web Development</a></li><li><a href="#" id="subGraph" class="subLinks">Graphic Design</a></li><li><a href="#" class="subLinks"id="subProto">Prototypes</a></li><li><a href="#" class="subLinks" id="subFun">Fun Stuff</a></li></ul>