$ (this) nicht funktionieren innerhalb if ($ ("Element").() Sind

Question

Mein erwartetes Ergebnis für den Code unten sind .csr-area-3 .csr-video mit zusätzlichen Klassen csr-animate csr-zoom-in, warum $(this) in dieser Situation nicht arbeiten?

if ($(".csr-area-3 .csr-video").is(":in-viewport")) { 
    $(this).addClass('csr-animate csr-zoom-in'); 
} 

Answer 1

Sie benötigen .filter(function), das verglichene Element zu erhalten, die Port-Ansicht und dann wird die Klasse in den dann

$(".csr-area-3 .csr-video").filter(function() { 
    return $(this).is(":in-viewport"); 
}).addClass('csr-animate csr-zoom-in'); 

Sie auch

$(".csr-area-3 .csr-video:in-viewport").addClass('csr-animate csr-zoom-in'); 

Answer 2

Da der Kontext der Anrufer Funktion/Ereignis ist oder vielleicht das globale Fenster Kontext verwenden den gleichen Wähler erneut, um die Klasse hinzuzufügen:

if ($(".csr-area-3 .csr-video").is(":in-viewport")) { 
    $(".csr-area-3 .csr-video").addClass('csr-animate csr-zoom-in'); 
} 

---

Bearbeiten von Kommentaren

eine Variable verwenden, die Ergebnisse des Jquery-Lookup zu speichern:

var csrvideo = $(".csr-area-3 .csr-video"); 
if (csrvideo.is(":in-viewport")) { 
    csrvideo.addClass('csr-animate csr-zoom-in'); 
} 

Hinweis: mit Filter als @ saptal Antwort wird die Klasse versichern zu dem Elemente hinzugefügt werden (s) im Ansichtsfenster, falls mehrere Elemente vorhanden sind.

Answer 3

Wenn Sie nur

verwenden verwenden könnte

$(this).someFunction(); 

this bezieht sich auf die window ob ject.

Sie benötigen

$(".csr-area-3:in-viewport").addClass('csr-animate csr-zoom-in'); 
$(".csr-video:in-viewport").addClass('csr-animate csr-zoom-in'); 

(Hängt davon ab, was Sie eigentlich wollen)