Javascript $（此）不在if（$（“.element”）is（）内工作

我对下面代码的预期结果是

.csr-area-3.csr video

添加了类

csr animate csr zoom

，为什么

$（此）

在这种情况下不起作用

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

---

由于上下文是调用方函数/事件或全局窗口上下文，请再次使用相同的选择器添加类：

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

---

根据评论编辑

使用变量存储jquery查找的结果：

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

注意：使用过滤器作为@saptal的答案将确保在存在多个元素的情况下将类添加到视口中的元素。

您需要获取视图端口中的匹配元素，然后将类添加到视口中

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

你也可以使用

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

如果你只使用

$(this).someFunction();

此

指的是

窗口

对象

你需要做什么

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

---

（取决于您实际需要什么）

为什么要这样做？您希望上下文是

if

条件？这就是我一直在做的，但理想情况下我不想重复代码并更改每个元素的编号。然后在循环中进行：）制作一个包含所有所需元素的数组，循环遍历它们并在每个元素上添加类您可以将jquery对象保存在一个变量中并使用它，这样选择器就不会被执行两次，或者您可以使用filter，正如@satpal在他的回答中所说的，其中

此

将引用

csr区域/csr视频

元素不正确，如果有多个元素具有匹配的选择器，则即使查看端口中只有一个

csr video

，上述代码也会将类添加到所有元素中。不仅仅是视图端口中的元素。