jQuery 정의시 선택한 객체 받기

Question

이 코드를 사용하여 슬라이드 요소에 애니메이션을 적용하고 있습니다. 이것은 flexlider 질문보다는 jquery 질문에 더 가깝습니다.

$('.header-slider').flexslider({ 
    animation: "slide", 
    directionNav: false, 
    slideshowSpeed: 5000, 
    controlsContainer: $('.header-slider .controls-container') 
}); 

하는 모든 좋은,하지만 나중에에에게 내가 정의합니다 :

이제 flexslider에 나는이 슬라이더의 컨트롤의 컨테이너를 지정하기 위해 같은 인수로 전달할 jQuery를 객체를 정의 할 수 있습니다 두 번째 슬라이더의가 단계적으로 보자, 나는 복사 - 붙여 넣기를 내 두 번째 슬라이더를 위해 위의 코드를 마치 마법처럼이

$('.quote-slider').flexslider({ 
    animation: "slide", 
    directionNav: false, 
    slideshowSpeed: 5000, 
    controlsContainer: $('.quote-slider .controls-container') 
}); 

작품처럼, 예상대로. 그러나 지금 우리는 옵션을 모두 슬라이더에 대한 동일하기 때문에, 나는 하나 개의 클래스에이보다 일반적인을 만들고 싶어 여기에 다음 단계의 추한 코드를 가지고, 그래서 그것을 청소하자

$('.slider').flexslider({ 
    animation: "slide", 
    directionNav: false, 
    slideshowSpeed: 5000, 
    controlsContainer: $(this).find('.controls-container') 
}); 

아니가, 여기에 당연히, $(this)이 문서를 참조하고 있습니다! 그렇다면 위 코드 (마지막 블록)에서 jQuery에게 현재 선택된 '.slider'을 참조하고 문서를 참조하지 말라고 할 수 있습니까? 분명히 $ ('. controls-container') 만 인수로 전달하면 두 슬라이더 모두에서 두 가지 옵션이 제공되므로 필자는이를 원하지 않는다.

Answer 1

맞습니다. $(this)은 flexslider()을 호출하는 요소를 가리키지 않습니다. 이 같은 each() 호출을 배치하여 해당 요소의 범위 내에서 flexslider() 전화를 걸 필요가이 문제를 해결하려면 :

$('.slider').each(function() { 
    $(this).flexslider({ 
     animation: "slide", 
     directionNav: false, 
     slideshowSpeed: 5000, 
     controlsContainer: $(this).find('.controls-container') 
    }); 
});