target child of waypoint element

Question

I'm trying to target a child of a specific waypoint element, the following is my code but it gives an error:

 this.element.find is not a function



 var paralaxInView = new Waypoint.Inview({
           element: $('.paralax')[0],
           enter: function(direction) {
             var tis = this.element;
             console.log(tis)
             this.element.find(".txt-block").addClass("in-view");
           }
         });

Answer 1

The 'element' property is a DOM element, or the actual container being watched as a Waypoint. So targeting 'this.element' would return the following HTML:

<div class="paralax"> 
  <div class="txt-block"></div>
</div>

In order to use the element as a jQuery selector, you'll need give it an ID attribute in the HTML and target it with that. Like so:

$(this.element.id)

Here's an updated version of your code:

var paralaxInView = new Waypoint.Inview({
  element: $('.paralax')[0],
  enter: function(direction) {
    $(this.element.id).find('.txt-block').addClass('in-view');
  }
});

See a working JSFiddle here.

Reference: A little more info on the 'this' keyword is towards the bottom of the Waypoints Getting Started page.