"[i – 1]" is Not Getting the Last Element of a List (JavaScript)

Issue

The Problem:

Hey everyone. I’m trying to create a simple function that identifies the next and previous elements of a current item within the ".length" of elements in a div, and then changes the ID of those two elements. Everything is working except for the part where it tries to identify the previous element at the beginning and the next element at the end.

What I’ve Tried:

It used to be that it would identify those items by using ".nextElementSibling" and ".previousElementSibling", but I realized that since it starts at the first element within the div then it would begin leaking out and trying to identify the previous element outside of the div.

I decided to use a for loop that creates a list of the elements with the specific class name, which works as intended. It begins to run into issues again, though, when it reaches the beginning or the end of the list. I assumed that "[i – 1]" would automatically bring it to the last element if the current was the one at the beginning of the list, and that "[i + 1]" would automatically bring it to the first element if the current was the one at the end of the list. It seems that is not the case.

Is anyone able to help me figure this out? It would be much appreciated.

Note: For the sake of simplicity, I didn’t include the JavaScript code that makes it switch between items within the div. That part is fully functional so I don’t believe it should affect the underlying concept of this problem.

My Code:

HTML:

<div class="items">
    <div id="current-item" class="current-div-item"></div>
    <div id="item" class="div-item"></div>
    <div id="item" class="div-item"></div>
    <div id="item" class="div-item"></div>
    <div id="item" class="div-item"></div>
</div>

Javascript:

var divItems = document.getElementsByClassName('div-item'); // Gets number of elements with the specific class.

for (i = 0; i < divItems.length; i++) { // Creates list of elements with the specific class.

    if (divItems[i].classList.contains('current-div-item')) { // If it is the current item, then do this:

        var next = divItems[i + 1] // Find the next element in the list
        var previous = divItems[i - 1] // Find the previous element in the list

        next.id = 'next-item' // Change the next element's ID to "next-item"
        previous.id = 'previous-item' // Change the previous element's ID to "previous-item"
    }
}

Solution

You are wanting the items to wrap around that isn’t going to happen. For the first item the previous item will be index -1 and for the last item the next index will be 1 larger than the actual number of items in the array.

If you add in a ternary you can get the values to wrap.

var prevIndex = (i === 0) ? divItems.length - 1 : i - 1;
var nextIndex = (i === divItems.length - 1) ? 0 : i + 1;

var next = divItems[prevIndex] // Find the next element in the list
var previous = divItems[nextIndex] // Find the previous element in the list

Answered By – Schleis

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.