두 개의 다른 목록을 반복합니다 - jQuery

Question

아주 간단한 슬라이드 쇼를 만들었습니다. 화살표를 클릭하면 $(this)가 사라지고 다음 슬라이드는 이 next() 기능을 사용합니다. 반대의 반전.

그러나 동일한 페이지에 슬라이드 쇼가 여러 개인 경우 이 아닌이 작동하는 것 같습니다.

JSFIDDLE

jQuery를 :

$('li').first().siblings().hide(); 

     $('.next').click(function() { 
      $(this) 
       .parent('.container') 
       .find('li:first-child') 
       .fadeOut(function 

() { 
      $(this) 
       .next() 
       .fadeIn() 
      $(this) 
       .appendTo('ul') 
     }); 

    }); 

    $('.back').click(function() { 
     $(this) 
      .parent('.container') 
      .find('li:first-child') 
      .fadeOut(function() { 
      $(this) 
       .parent('.container') 
       .find('li:last-child') 
       .fadeIn() 
       .prependTo('ul') 
     }); 

    }); 

HTML :

<div class="container"> 
    <ul class="inner_box"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
    </ul> 
    <div class="back">back</div> 
    <div class="next">next</div> 
</div> 

<div class="container"> 
    <ul class="inner_box"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
    </ul> 
    <div class="back">back</div> 
    <div class="next">next</div> 
</div> 

Answer 1

이

$('.container').find('li:first-child').siblings().hide(); 

$('.next').click(function() { 
    var $this = $(this), $ul = $(this).siblings('ul'); 

    $ul.find('li:first-child').fadeOut(function() { 
     var $this = $(this); 
     $this.next().fadeIn(); 
     $this.appendTo($ul) 
    }); 

}); 

$('.back').click(function() { 
    var $this = $(this), $ul = $(this).siblings('ul'); 

    $ul.find('li:first-child').fadeOut(function() { 
     $ul.find('li:last-child').prependTo($ul).fadeIn() 
    }); 

}); 

데모 시도 : (테스트, working in Fiddle) Fiddle

Answer 2

대신 각 .inner_box 요소를 통해 페이지에 루프를 처음 리를 숨기고 첫하지만 모두를 숨길의 li 요소.

$('ul.inner_box').each(function() { 
    $(this).find('li').first().siblings().hide(); 
}); 

Answer 3

새로운 JS

$('.container').each(function() { 

    $(this).find('li').first().siblings().hide(); 

    $(this).find('.next').click(function() { 
     $(this) 
      .parent('.container') 
      .find('li:first-child') 
      .fadeOut(function() { 
      $(this) 
       .next() 
       .fadeIn() 
      $(this) 
       .appendTo('ul') 
     }); 

    }); 

    $(this).find('.back').click(function() { 
     $(this) 
      .parent('.container') 
      .find('li:first-child') 
      .fadeOut(function() { 
      $(this) 
       .parent('.container') 
       .find('li:last-child') 
       .fadeIn() 
       .prependTo('ul') 
     }); 

    }); 

}); 

그래서 기본적으로 당신이 $('.container').each에서 전체를 감싸고 내부의 선택기를 조정할 따라서의 각 인스턴스에 대해 모든 작업을 한 번 수행합니다.이고 서로 간섭하지 않습니다.