Javascript 如何将一个css类嵌套在另一个css类的5个子类中

我试图在向下滚动页面时使用javascript更改.box的不透明度

var $img = $('.vs-current.box');

我只想目标。框是下降5级。与当前

我不想针对任何.vs right的后代.box

为什么.vs-current.box的目标是all.box

谢谢

<section id="section-1" class="vs-current">
    <div class="vs-content">
        <div class="container">
            <div class="intro">
                <div class="wrapper-client">
                    <div class="box" style="opacity: 5.011437074829932;">
                        <p>Image 1</p>
                    </div>
                    <div class="box" style="opacity: 4.07266156462585;">
                        <p>Image 2</p>
                    </div>
                    <div class="box" style="opacity: 3.133886054421769;">
                        <p>Image 3</p>
                    </div>
                    <div class="box" style="opacity: 2.195110544217687;">
                        <p>Image 4</p>
                    </div>
                    <div class="box" style="opacity: 1.2563350340136055;">
                        <p>Image 5</p>
                    </div>
                    <div class="box" style="opacity: 0.3175595238095238;">
                        <p>Image 6</p>
                    </div>
                    <div class="box" style="opacity: -0.6212159863945578;">
                        <p>Image 7</p>
                    </div>
                </div><!-- END .wrapper-client -->
            </div><!-- END .intro -->
        </div><!-- END .container -->
    </div>
</section>

<section id="section-2" class="vs-right">
    <div class="vs-content">
        <div class="container">
            <div class="intro">
                <div class="wrapper-client">
                    <div class="box" style="opacity: 5.011437074829932;">
                        <p>Item 1</p>
                    </div>
                    <div class="box" style="opacity: 4.07266156462585;">
                        <p>Item 2</p>
                    </div>
                    <div class="box" style="opacity: 3.133886054421769;">
                        <p>Item 3</p>
                    </div>
                    <div class="box" style="opacity: 2.195110544217687;">
                        <p>Item 4</p>
                    </div>
                    <div class="box" style="opacity: 1.2563350340136055;">
                        <p>Item 5</p>
                    </div>
                    <div class="box" style="opacity: 0.3175595238095238;">
                        <p>Item 6</p>
                    </div>
                    <div class="box" style="opacity: -0.6212159863945578;">
                        <p>Item 7</p>
                    </div>
                </div><!-- END .wrapper-client -->
            </div><!-- END .intro -->
        </div><!-- END .container -->
    </div>
</section>

图1

图2

图3

图4

图5

图6

图7

项目1

项目2

项目3

项目4

项目5

项目6

项目7

用于要使用的子体

var$img=$（'.vs.current.box'）；
$（“#postResult”）.html（$img.length）

对象长度：
图1

图2

图3

图4

图5

图6

图7

项目1

项目2

项目3

项目4

项目5

项目6

项目7

你是说像这样？编辑此选项可添加长方体类和淡入


$（'.vs.current.box:nth child（5）'）.css（'background-color'，'green'）；
$（'与当前框：第n个孩子（5）”）.fadeTo（2500,1）

图1

图2

图3

图4

图5

图6

图7

项目1

项目2

项目3

项目4

项目5

项目6

项目7

是否要选择带有
图像5
的div？我想您需要这个
$（'.vs.current.box:nth child（5）'）
，我不确定您是否理解正确。您的选择器中是否有空格？正如你在问题中所写的，这将得到既有class
.vs current
又有
.box
的元素，所以没什么，顺便说一句，我认为不透明度介于0和1之间，所以负片和2.4537373456437等等，它们是用来做什么的，某种插件？