jQuery erhalten ausgewähltes Objekt nach der Definition

Question

Ich verwende einen Code wie diesen, um meine Folie Elemente zu animieren. Beachten Sie, dass dies eher eine Frage als eine Frage der Flexlider ist.

nun in flexslider kann ich ein jQuery-Objekt definieren als Argument zu übergeben, wie dies den Behälter der Bedienelemente für den Schieber zu spezifizieren:

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

alles gut, aber später, wenn ich definieren einen zweiter Schieber, wollen sie es Schritt für Schritt nehmen, ich copy-paste für meinen zweiten Schieber des obigen Code wie diese

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

wirkt wie ein Zauber, wie erwartet. Aber jetzt wir hässlich Code haben, so machen wir es aufzuräumen, da die Optionen die gleichen für beide Schieber sind, wie ich diese allgemeinere in einer Klasse machen wollen und hier ist der nächste Schritt:

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

Nein, hier ist wo das Problem reinkommt. Natürlich bezieht sich $(this) auf das Dokument! Also, was kann ich im obigen Code (letzter Block) tun, um jQuery mitzuteilen, dass ich auf die aktuell ausgewählte '.slider' und nicht auf das Dokument verweisen möchte? Offensichtlich, wenn ich nur $ ('. Controls-container') als Argument übergebe, bekomme ich doppelte Optionen in beiden Schiebereglern, also will ich das nicht.

Answer 1

Sie haben recht, $(this) zeigt nicht auf das Element, das Sie anrufen flexslider() auf. Um dies zu beheben, müssen die flexslider() Anruf innerhalb des Bereichs des Elements platzieren, indem es in einem each() Anruf, wie diese Platzierung:

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