How to create two ordered lists in jQuery

0

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;
    });
    
asked by anonymous 10.11.2018 / 00:46

0 answers