i76 i76 - 5 months ago 23
HTML Question

How to target child of a div below in JavaScript

I have the following code

<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>


I am trying to use the each loop on each one of the divs but I am not sure how to target the inner div of each project

// 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);
});
});


I tried using

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


but this doesn't seem to work. What would be a proper way of doing this?

Answer

You need to use .children() or .find() as the element div is a child, the method .next() targets immediately following sibling thus its not working.

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

As per Docs

A Selector targeting one or more elements or a DOM object that is supposed to be modified.

its accepts a DOM element or selector, You need to pass DOM element thus use

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