Search code examples
jqueryindexingclone

Jquery Clone function with eq(index)


I have many similar divs with id's as tictab ..and i want make the first tictab unvisible and add a clone of it at the end. i am using the following code

$('#leftButton').click(function(){      
    $('#tictab').clone().insertBefore('#rightButton');

    $('#tickers').find('#tictab').eq(ind).css('display','none');

    ind++;  
});

Where ind starts from 0. But the problem i am facing here is that jquery is making the cloned tictabs also invisible for some reason...I'm guessing it is because of some issue in indexing of the eq() function. Can anyone please tell me the right way to do it.


Solution

  • You cannot have multiple element with the same id. If you need this type of relationship between them all, use a common class name, not a common id name. The id attribute is meant to be a unique value not found on any other element in the document.

    It sounds as though you want to clone the latest .tictab element, hide it, insert it just before #rightButton, and show the previous hidden clone. If that's the case, the following will work:

    $("#leftButton").on("click", function(){
        $(".tictab:last").show().clone().hide().insertBefore("#rightButton");
    });​
    

    Fiddle: http://jsfiddle.net/jonathansampson/dpze5/