Jquery слайдшоу влияет только на один DIV

Question

У меня есть простой слайд-шоу коды вроде этого:

function anim() { 
    $(".images img").first().appendTo('.images').fadeOut(500); 
    $(".images img").first().fadeIn(500);  
    setTimeout(anim, 5000); 
} 

И это мой HTML код

<div class="subbox-1"> 
     <div class="caption"> 
       <div class="caption-text"> 
        <h3>COAL MINING</h3> 
         <p> 
          Lorem Ipsum dolor sit amet. 
         </p> 
       </div> 
     </div> 
     <div class="images"> 
       <img src="images/thumb1.jpg" /> 
       <img src="images/thumb1-1.jpg" /> 
       <img src="images/thumb1-2.jpg" /> 
       <img src="images/thumb1-3.jpg" /> 
     </div> 
</div> 

И у меня есть много .subbox-1 с другим источником изображения. Но мой код JQuery работает только в одном .subbox-1 изображениях, если у меня есть два .subbox-1, то изображения второго .subbox-1 не изменятся.

Пожалуйста, помогите мне, спасибо, прежде чем :)

Answer 1

Вы можете использовать jQuery selector context так, что поиск будет осуществляться только потомкам контекста. См. this SO question для более подробного обсуждения этой темы.

В основном ваша anim функция будет принимать 1 аргумент:

function anim(selector) { 
    ... 
} 

и вы бы передать контекст (обычно this) для вашей anim функции как таковой:

$(".subbox-1").each(function() {anim(this)}); 

EDIT:

• OP's snippet
• Modified