jQuery Плагин, который я построил, не работает

Question

Я построил код ниже, но я не могу заставить его работать более чем на одной странице, так как я говорю, что все элементы должны находиться внутри родительского селектора, загруженного на но когда есть 2 она полностью ломает

jQuery.fn.carousel = function(op){ 
return this.each(function(){ 
    // merge the options over-top of the defaults 
    op = $.extend({ 
    left_btn:'', 
    right_btn:'', 
    list:'', 
    width:'0px', 
    _elements:[], 
    _current:0, 
    _locked:false 
    }, op); 

    // check for left_btn if not set throw error 
    if(op.left_btn == ''){ 
    throw "Error jQuery Carousel left_btn not defined"; 
    } 

    // check that width is defined 
    if(op.width == '0px'){ 
    throw "Error jQuery Carousel width not defined"; 
    } 

    // check for right_btn if not set throw error 
    if(op.right_btn == ''){ 
    throw "Error jQuery Carousel right_btn not defined"; 
    } 

    // check for list if not set throw error 
    if(op.left_btn == ''){ 
    throw "Error jQuery Carousel list not defined"; 
    } 

    // set up left button click event 
    $(op.left_btn, $(this)).click(function(){ 
    // check for lock only run if lock is disabled 
    if(op._locked == false){ 
    // activate lock 
    op._locked = true; 
    // save the currently open view 
    var last = op._current; 
    // set the current to the next view 
    if(op._current == 0){ 
    op._current = op._elements.length -1; 
    }else{ 
    op._current -= 1; 
    } 
    // add the previus element to the beging 
    $(".carru").prepend($(op._elements[op._current])); 

    $(op._elements[op._current]).css({width:"0px"}); 

    // set the currently live view to shrink to the left 
    $(op._elements[op._current]).animate(
    { 
     width:op.width 
    }, 
    1000, 
    function(){ 
     $(op._elements[last]).remove(); 
     op._locked = false; 
    } 
    ); 
    } 
    }); 

    // set up the right button click event 
    $(op.right_btn, $(this)).click(function(){ 
    // check for lock only run if lock is disabled 
    if(op._locked == false){ 
    // activate lock 
    op._locked = true; 
    // save the currently open view 
    var last = op._current; 
    // set the current to the next view 
    if(op._current == op._elements.length-1){ 
    op._current = 0; 
    }else{ 
    op._current += 1; 
    } 

    // add the previus element to the beging 
    $(".carru").append($(op._elements[op._current])); 

    // set the currently live view to shrink to the left 
    $(op._elements[last]).animate(
    { 
     width:'0px' 
    }, 
    1000, 
    function(){ 
     $(op._elements[last]).remove(); 
     $(op._elements[last]).css({width:op.width}); 
     op._locked = false; 
    } 
    ); 
    } 
    }); 

    // save all the li elements to a variable for access later 
    $("li", $(op.list, $(this))).each(function(){ 
    $(this).css({position:'relative'}); 
    op._elements[op._elements.length] = $(this); 
    }); 


    // set the list to hide overflowing data 
    $(op.list, $(this)).css({overflow:"hidden"}); 

    // empty the list and set the new ul 
    $(op.list, $(this)).html("<ul class=\"carru\" style=\"width:999999px;display:block;height:inherit;padding:0;margin:0;\"></ul>"); 

    // add the first element to the live view 
    $(".carru", $(this)).append($(op._elements[0])); 
}); 
} 

Answer 1

Может быть, эта линия

$(".carru").append($(op._elements[op._current])); 

должен каким-то образом ограничить селектор .carru только внутри текущего экземпляра плагина ..

что-то вроде

$(".carru", $(this)).append($(op._elements[op._current])); 

одно и то же самое с

$(".carru").prepend($(op._elements[op._current]));