Myujth

I'm trying to triggers a function on several owl-carousel sliders having the same class. If i do a console.log, it logs twice, but works only on the first slider.

Here's my function:

function setActiveItem()
 var item = $('.owl-item');
 var itemLink = $('.owl-item a');
 var pos = $('.is-active').parent().parent().index();

 $('.slider-mobile').each(function() 
 if($(this).find(itemLink).is('.is-active')) 
 item.removeClass('active');
 $(this).trigger('to.owl.carousel', [pos, 1, true]);
 
 )
 

 setActiveItem();

And here's a simplified version of my markup:

<ul class="list-container slider-mobile" data-stage-padding-items="200">
 <li class="list-item">
 <a href="#" class="title title--small list-link is-active">item</a>
 </li>
</ul>
<ul class="slider-mobile" data-stage-padding-items="200">
 <li class="list-item">
 <a href="#" class="title title--small list-link is-active">item</a>
 </li>
</ul>

I'm not sure if i'm using the each() function right, or if it fits my need at all.

Ok i figured it out.
@Reinder Wit you were right i was referencing the item of the first slider only, so both of my sliders were getting the same datas.

I did this:

function setActiveItem()

 $('.slider-mobile').each(function() 
 var item = $(this).find('.owl-item');
 var itemLink = $(this).find('.owl-item a');
 var pos = $(this).find('.is-active').parent().parent().index();

 if($(this).find(itemLink).is('.is-active')) 
 item.removeClass('active');
 $(this).trigger('to.owl.carousel', [pos, 1, true]);
 console.log(pos);
 
 )
 

 setActiveItem();

And it is working now. Thanks for the clue.

You should activate your listener in the document ready like this:

$(document).ready(function()
 setActiveItem();
);