04/02/2010 Development / java script

Sabemos que pra tudo na vida há uma solução. No desenvolvimento eu não penso diferente, acredito que há sempre uma forma de se chegar ao objetivo e mais..que existem várias formas se alcançar o mesmo resultado.

Abaixo, duas maneiras de criar um anterior e próximo varrendo uma list.

  1. Na primeira, usando nextSibling, firstChild, previousSibling...eu particularmente não sou muito fã de usar esses métodos.
  2. Na segunda, lendo um Array, que na minha opinião é mais rápido e mais fácil de trabalhar.

Esse exemplos são somente com demonstração mesmo e para estudos de como utilizar esse comandos.

// Primeiro Case **********************************

var dados = document.getElementById('list');
var name  = document.getElementById('nome');
var cont  = 0;
function anterior(){
 name.innerText = dados.childNodes[cont].previousSibling.innerText;
 cont--;
}

function proximo(){
 name.innerText = dados.childNodes[cont].nextSibling.innerText;
 cont++;
}

function init(){
 name.innerText = dados.firstChild.innerText;
}

init();

// Segundo Case **********************************

var data = document.getElementById('list').getElementsByTagName('li');
var num  = 0;
function ant(){
 alert(data[--num].innerText);
}

function prox(){
 alert(data[num++].innerText);
}

// html *********************************

<ul id="list">
 <li>Alec</li>
 <li>Daniel</li>
 <li>William</li>
 <li>Hugo</li>
</ul>

<span id="nome"></span><p>
<button onclick="anterior()">Previous</button><button onclick="proximo()">Next</button><p>
<button onclick="ant()">Previous</button><button onclick="prox()">Next</button>