jquery - 从 Jquery/CSS 中的动画中排除子类

Question

我有一个网站，我使用一个小的 jQuery 函数和 css 来翻译页面滚动上的部分(淡入并向上移动)。

我不想设置动画的所有部分都有“sp-portfolio”的子类，即 sp-page-builder .section .sp-portfolio 但该函数适用于 .sp-page-builder 部分 见下文(请注意，这在 Joomla 中运行，因此开头的语法略有不同:

jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section")
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(".sp-portfolio")[0]){
        //Do Nothing
        } else {
            if (jQuery(tag).position().top < pageBottom) {
                jQuery(tag).addClass("visible").delay( 800 )
            } else {
                jQuery(tag).removeClass("visible")
            }
        }
    }
})

CSS 是:

/** Animation test **/
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)) {
  opacity: 0;
  transition: opacity 1s;
  transform: translate(0, 100px); 
  transition: all 0.6s;
}
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)).visible { 
  opacity: 1;
  transform: translate(0, 0);
}

有没有办法检查子类 .sp-portfolio 是否存在，如果存在则跳过该部分的函数。

上面的代码似乎只是跳过整个页面上的函数，而不是继续下一部分。

可以在此处查看示例页面:SP Portfolio - 不应移动的部分是“我们的工作”和“最新见解”。

Answer 1

重读时我注意到 .sp-portfolio类不在section上，但位于 DOM 树较低的某个位置。在这种情况下，最简单的方法就是按如下方式修复代码:

if (jQuery(".sp-portfolio")[0]){
    //Do Nothing
} else {

可以重写如下

if (jQuery(".sp-portfolio", tag).length){
    //Do Nothing
} else {

指定tag作为第二个参数意味着 jQuery 仅在该元素内部搜索(又名 context )。

<小时/>

<罢工>您可以使用 :not() selector在查询中。

var tags = jQuery(".sp-page-builder section:not(.sp-portfolio)")

这样你只能得到 section没有类 .sp-portfolio 。