Get Next/Previous Element Using JavaScript

Get next / previous element using JavaScript?

Well in pure javascript my thinking is that you would first have to collate them inside a collection.

var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");

So basically with selectionDiv iterate through the collection to find its index, and then obviously -1 = previous +1 = next within bounds

for(var i = 0; i < divs.length;i++)
{
   if(divs[i] == selectionDiv)
   {
     var previous = divs[i - 1];
     var next = divs[i + 1];
   }
}

Please be aware though as I say that extra logic would be required to check that you are within the bounds i.e. you are not at the end or start of the collection.

This also will mean that say you have a div which has a child div nested. The next div would not be a sibling but a child, So if you only want siblings on the same level as the target div then definately use nextSibling checking the tagName property.

How to get previous DOM element in Javascript?

You can use .previousElementSibling property to get the label element.

var el = document.getElementsByTagName('input');

for(var i =0; i< el.length;i++){
console.log(el[i]);
console.log(el[i].previousElementSibling);
if(el[i].getAttribute("name")==el[i].previousElementSibling.getAttribute("for")){
console.log("it is label");
}
}

Here is the jsfiddle example.

How to get next and previous five element of from an array?

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
const size = 5
let current = 1

function prev(){
  if(current > 1){
    current--
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function next(){
  if(current >= 1 && current < arr.length/size){
    current++
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function getNewArr(){
  return arr.slice(size*current - size, size*current)
}

<button onclick=prev()>prev</button>
<button onclick=next()>next</button>

Getting next and previous element of json array

How can I tell that there ain't another blog after or previous?

Look at the index of the current blog item and see if the next one is bigger than than the number of items in the array or if the previous one is less than 0.

var blogs = {    "blogItem": [{        "id": 1,        "title": "animals blog 1",        "category": "animals",        "text": "text",        "articleid": 1    }, {        "id": 2,        "title": "lifestyle blog 1",        "category": "lifestyle",        "text": "text",        "articleid": 1    }, {        "id": 3,        "title": "animals blog 2",        "category": "animals",        "text": "text",        "articleid": 2    }, {        "id": 5,        "title": "animals blog 4",        "category": "dieren",        "text": "text",        "articleid": 4    }, {        "id": 4,        "title": "animals blog 5",        "category": "animals",        "text": "text",        "articleid": 3    }]};
var index = 0;var item = blogs.blogItem[index];
var title = document.getElementById('title');var text = document.getElementById('text');var previous = document.getElementById('previous');var next = document.getElementById('next');
displayItem(item);
previous.addEventListener('click', function() {    displayItem(blogs.blogItem[--index]);});
next.addEventListener('click', function() {    displayItem(blogs.blogItem[++index]);});
function displayItem(item) {    title.innerText = item.title;    text.innerText = item.text;    previous.disabled = index <= 0;    next.disabled = index >= blogs.blogItem.length -1;}

[disabled] {    opacity: 0.5;}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/><div class="container">  <div>    <div id="title"></div>    <div id="text"></div>  </div>  <button id="previous">Previous</button>  <button id="next">Next</button></div>

JavaScript: Get next element from Parent

Try this. nextSibling includes text nodes (including empty space), but nextElementSibling doesn't.

function disableInput(element) {
  element.parentNode.nextElementSibling.disabled = true;
}

Find Next / Previous Element

How about something like this:

$('.prev').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.prev().addClass('active');

    var id = $current.prev().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

$('.next').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.next().addClass('active');

    var id = $current.next().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

UPDATE

If you want to use a generic function:

$('.prev').click(function(){
     Navigate('previous');
});

$('.next').click(function(){
     Navigate('next');
});


function Navigate (direction){
    var $current = $('.gameListing .active');
    $current.removeClass('active')

    var secondItem = $current.next().addClass('active');
    if(direction == 'previous')
         secondItem = $current.prev().addClass('active');

    var id = secondItem.attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);

}

Get Next/Previous Element Using JavaScript