Grabbing previous and next element in an array

Question

I am working on an image gallery. Now I have some images like these

<ul id="moniqueGalList">
    <li><img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt=""></li>
</ul>

And using the click function i capture the current image clicked

for (var i = 0; i < moniqueThumbs.length; i++) {
    moniqueThumbs[i].addEventListener("click", grabBigImgPath);
}

function grabBigImgPath() {
    var currentThumbClicked = this;
}

How can I save the previous element and the next element in the array of moniqueThumbs (ie. varPrev and VarNext values)?

Answer 1

I think you're saying that when a click occurs on one of these images, you want to set variables to the previous image (if any) and next image (if any).

If so, you can do this:

function grabBigImgPath() {
    var currentThumbClicked = this;
    var li = this.parentNode;
    var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild;
    var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild;
}

Those will be null if there is no previous or next element.

previousElementSibling / nextElementSibling / firstElementSibling : Your DOM structure is a series of li elements, each containing an img . The li elements are "sibling" elements (they share the same immediate parent). An element's previousElementSibling is the sibling element before it; its nextElementSibling is the element after it. firstElementChild is the first child element within an element.

IIRC, those DOM properties aren't supported in IE until IE9. If you have to support IE8, it's more of a pain, because you have to use previousSibling / nextSibling / firstChild , which can be non- Element nodes, which means you have to loop.

Live Example:

 var moniqueThumbs = document.querySelectorAll(".moniqueThumbs"); for (var i = 0; i < moniqueThumbs.length; i++) { moniqueThumbs[i].addEventListener("click", grabBigImgPath); } function grabBigImgPath() { var currentThumbClicked = this; var li = this.parentNode; var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild; var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild; snippet.log("Clicked: " + this.getAttribute("data-bigimgpath")); snippet.log("Previous: " + (prevThumb ? prevThumb.getAttribute("data-bigimgpath") : "(none)")); snippet.log("Next: " + (nextThumb ? nextThumb.getAttribute("data-bigimgpath") : "(none)")); snippet.logHTML("<hr>"); } 

 <ul id="moniqueGalList"> <li> <img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt=""> </li> <li> <img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt=""> </li> <li> <img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt=""> </li> <li> <img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt=""> </li> <li> <img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt=""> </li> </ul> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

More to explore in the DOM core specification .

If you have to support IE8, those loops I was talking about look like this:

function getPreviousElementSibling(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // 1 = Element
            return prev;
        }
    }
    return null;
}

...which is why we have so many libraries like jQuery, YUI, etc. to help us with DOM traversal. :-)