I have to create two lists in jQuery.
There is a button that can change an item from the A
list to the B
list, and in case these two lists should be numbered:
A:ITEM 1: B:ITEM 1:
A:ITEM 2: B:ITEM 2:
And when I change the item from the A
list, it should have the same numbering as the list it belongs to:
A:ITEM 1: B:ITEM 1:
A:ITEM 2: B:ITEM 3:
B:ITEM 2: B:ITEM 4:
$(document).ready(function(){
$('a.add').click(function(event){
//Zera qualquer evento pré-programado do
//elemento
event.preventDefault();
//Total de LI's encontradas dentro de um elemento
//que tenha o ID "lista_a"
var qtdeItens = $('#lista_a li').length;
//Criar um novo elemento LI
var li = $('<li></li>');
//Alimentar o texto da nova LI
li.html('A: ITEM ' + (qtdeItens + 1));
//Criar um atributo DATA-ID para salvar o identificar
li.attr('data-id', qtdeItens);
li.attr('value', qtdeItens);
//Adiciona a nova LI imediatamente antes da tag </ul>
$('#lista_a').append(li);
});
$('a.badd').click(function(event){
event.preventDefault();
var qtdeItens = $('#lista_b li').length;
var li = $('<li></li>');
li.html('B: ITEM ' + (qtdeItens + 1));
li.attr('data-id', qtdeItens);
li.attr('value', qtdeItens);
$('#lista_b').append(li);
});
//Click para remover o ultimo item da lista
$('a.remove').click(function(event){
//Zera qualquer evento pré-programado do
//elemento
event.preventDefault();
//Remove o ultimo item da lista
$('#lista_a li').last().remove();
});
$('a.bremove').click(function(event){
event.preventDefault();
$('#lista_b li').last().remove();
});
$('a.right').click(function(event){
event.preventDefault();
var vaitomar = $('#lista_a li').first();
$('#lista_b').append(vaitomar);
//nada a comentar
var vounao = [];
$('#lista_b li').each(function(index, item){
vounao.push(item);
});
vounao.sort(function(a, b){
return a.value > b.value;
});
$('#lista_b').append(vounao);
var qtdeItens = $('#lista_a li').length;
});
$('a.left').click(function(event){
event.preventDefault();
var vaitomar = $('#lista_b li').first();
$('#lista_a').append(vaitomar);
//nada a comentar
var vounao = [];
$('#lista_a li').each(function(index, item){
vounao.push(item);
});
vounao.sort(function(b, a){
return b.value > a.value;
});
$('#lista_a').append(vounao);
var qtdeItens = $('#lista_b li').length;
});