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 >
    <div id="current-item" ></div>
    <div id="item" ></div>
    <div id="item" ></div>
    <div id="item" ></div>
    <div id="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"
    }
}

CodePudding user response：

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

CodePudding user response：

Based on your HTML code, in logic JS to fetch the all the items based in class it would not fetch the current-div-item as you have written logic to fetch only div-item. So I assume that you also need to change the HTML code. As per my understanding about your requirement I have done some changes and uploading the modified code. Which is working as per you requirement.

HTML:

<div id="current-div-item" >Current</div>
<div id="item" >Div1</div>
<div id="item" >Div2</div>
<div id="item" >Div3</div>
<div id="item" >Div4</div>

Java Script:

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

for (i = 0; i < divItems.length; i  ) {
    if (divItems[i].id=='current-div-item') {
        var next;
        if (i == divItems.length-1)
            next = divItems[0];
        else
            next = divItems[i   1];
            
        var previous;
        if (i == 0)
            previous=divItems[divItems.length-1];
        else
            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"
    }
}

Attached the screenshot of the modified elements id for your reference