How get next element after "this" - pure javascript

Question

I have code:

var links = document.querySelectorAll('a[data-lightbox]');

for (var i = 0; i < links.length; i++) {

  links[i].addEventListener('click', function() {
    event.preventDefault();
    var imgLink = this.getAttribute('href');
    var imgTitle = this.getAttribute('title');
    var dataLightbox= this.getAttribute('data-lightbox');
    console.log(); //next element after "this." something like "links[i+1]" or i don't know...
  }, false);
}

I want to get 'data-lightbox' attribute for next element which I clicked currently. How to do it?

@Santi That wouldn't work because `i` is modified immediately. — melpomene, Dec 07 '16 at 20:32
`links[i+1]` would actually work if you [fix the scope of `i`](http://stackoverflow.com/q/750486/1048572) for the closure — Bergi, Dec 07 '16 at 20:33
Are all those links next to each other in the DOM? Then `this.nextSiblingElement` might do. — Bergi, Dec 07 '16 at 20:34

score 0 · Accepted Answer · answered Dec 07 '16 at 20:38

Using a IIFE can do the trick to preserve the i scope

var links = document.querySelectorAll('a[data-lightbox]');
for (var i = 0; i < links.length; i++) {
    (function(i){
       links[i].addEventListener('click', function() {
        event.preventDefault();
        var imgLink = this.getAttribute('href');
        var imgTitle = this.getAttribute('title');
        var dataLightbox= this.getAttribute('data-lightbox');
        console.log(links[i + 1]);
      }, false);
    })(i)

    }

Yeah, it works! Thanks for quick answer. :) Also i try other solutions from here. Thank you. — Damian, Dec 07 '16 at 21:04

score 0 · Answer 2 · 2016-12-07T20:46:48.883

You can try to get the next element in the way you thought: links[i + 1], although the i is an unique hoisted variable by this loop. You can, however, re-generate this i in the loop body, using variable declaration of let (only supported in ES6+) or using a new function scope inside that loop.

let acts like we were in a new scope, but not. It won't affect the previous i in this example, it'll only replace its presence at the block statement.

var links = document.querySelectorAll('a[data-lightbox]');

for (var i = 0; i < links.length; i++) {

  let i = i;

  links[i].addEventListener('click', function() {
    event.preventDefault();
    var imgLink = this.getAttribute('href');
    var imgTitle = this.getAttribute('title');
    var dataLightbox= this.getAttribute('data-lightbox');
    console.log(links[i + 1]);
  }, false);
}

I think it is important to add a note about browser support for `let` .. ES6 — Asons, Dec 07 '16 at 20:42

score 0 · Answer 3 · answered Dec 07 '16 at 20:43

This is a scope issue.

You can use bind (which would fix the scope issue) for the onclick event binding,while this you can send i to the method and you can access the next element using i+1

check the following snippet

window.onload = function() {
  var links = document.querySelectorAll('a[data-lightbox]');


  for (var i = 0; i < links.length; i++) {

    links[i].addEventListener('click', onclick.bind(links[i], i));
  }

  function onclick(i) {

    var imgLink = this.getAttribute('href');
    var imgTitle = this.getAttribute('title');
    var dataLightbox = this.getAttribute('data-lightbox');
    if(links[i+1]!=undefined){
    var nextLightbox = links[i + 1].getAttribute('data-lightbox');
      }

    console.log(imgLink);
    console.log(dataLightbox);
    console.log(nextLightbox);
  }
}

<a href="#" data-lightbox=10>link1</a>
<a href="#" data-lightbox=20>link2</a><a href="#" data-lightbox=30>link3</a><a href="#" data-lightbox=40>link4</a><a href="#" data-lightbox=50>link5</a>

Hope it helps

arbybruce · Answer 4 · 2016-12-07T20:48:10.207

0

In addition to what others have mentioned, another way to go about this is using nextSibling on this.

var links = document.querySelectorAll('a[data-lightbox]');

for (var i = 0; i < links.length; i++) {

  links[i].addEventListener('click', function() {
    event.preventDefault();
    var imgLink = this.getAttribute('href');
    var imgTitle = this.getAttribute('title');
    var dataLightbox= this.getAttribute('data-lightbox');
    console.log(this.nextElementSibling);
  }, false);
}

edited Dec 07 '16 at 20:48

answered Dec 07 '16 at 20:44

arbybruce

188
1
11

Make that `nextElementSibling` so you don't catch a text node – Asons Dec 07 '16 at 20:46
Oh, yes. Will do. – arbybruce Dec 07 '16 at 20:47

How get next element after "this" - pure javascript

4 Answers4