CODEWITHSUNDEEP
javascriptjquery
z-1881
z-1881

Reputation: 123

check if div has class then animate

I'm trying to do an animate after an owl carousel drag user action.

The problem is that $(this) is not recognizing the .nav-item that has .active class. Any ideas what I'm doing wrong and how to fix it?

owl.on('changed.owl.carousel', function(event) {
  if ($(".nav-item").hasClass("active")) {
    var navPosition = $('.navbar-collapse').scrollLeft()
    elemPosition = $(this).offset().left;
    $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);
  }
})

Upvotes: 1

Views: 185

Answers (1)

Luca Corsini
Luca Corsini

Reputation: 736

The problem is that hasClass doesn't select an element, but it just returns true or false. To do what you need to do, try using the each function to select the element you want to interact with and assign it to this correctly:

owl.on('changed.owl.carousel', function(event) {
  $(".nav-item").each(function(){
    if ($(this).hasClass("active")){
      var navPosition = $('.navbar-collapse').scrollLeft();
      elemPosition = $(this).offset().left;
      $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);
    }
  }
});

You could also do something like this in order to select the elements with the active class with one single selector string:

owl.on('changed.owl.carousel', function(event) {
  $(".nav-item.active").each(function(){
    var navPosition = $('.navbar-collapse').scrollLeft();
    elemPosition = $(this).offset().left;
    $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);
  }
});

https://api.jquery.com/each/

Upvotes: 3

Related Questions