如何在JavaScript中将div的子对象作为目标

Question

我有以下代码

<div class="header"> 
  <div class="one_cont">Div one!</div>  
</div>

<div class="project" id="trigger1">
  <div class="text" id="anim1">Div two!</div>
</div>

<div class="project" id="trigger2">
  <div class="text" id="anim2">Div two!</div>
</div>

我正在尝试在每个div上使用each循环，但是我不确定如何定位每个项目的内部div

// Init ScrollMagic
$(document).ready(function() {
    var controller = new ScrollMagic.Controller();
    // Create a Scene
    $(".project").each(function() {
        var ourScene = new ScrollMagic.Scene({
            triggerElement: this,
            triggerHook: 0.25
        })
        .setClassToggle($(this).next(), "fade-in")
        .addIndicators()
        .addTo(controller);
    });
});

我尝试使用

.setClassToggle( $(this).next(),

但这似乎不起作用。 这样做的正确方法是什么？

Answer 1

您需要使用.find() .children()或.find()因为div元素是子元素， .next()方法紧随同级对象，因此无法正常工作。

.setClassToggle( $(this).children("div"), "fade-in")

根据文档

以一个或多个元素或应该修改的DOM对象为目标的Selector。

它接受DOM元素或选择器，您需要传递DOM元素，从而使用

.setClassToggle( $(this).children("div")[0], "fade-in")

Answer 2

使用children()代替next()定位内部div

.setClassToggle( $(this).children("div"), "fade-in")