Databases
StackOverflow2013
Postsdbo
POjQuery add same class to same element index in two different containers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery add same class to same element index in two different containers
    text
    copied!<p>I am using a carousel jquery plugin that doesn't have a built in thumbnail nav, so I am trying to build a poor-man's version.</p> <p>I'm using the Owl Carousel plugin.</p> <p>So what I need, for this instance, to happen is that if a slide div in the main carousel has a class .active, then I need to have a div in the second carousel, which has the same index, to get a class active.</p> <p>Main carousel code:</p> <pre><code> &lt;div id="slide1"&gt; &lt;div class="owl-wrapper-outer"&gt; &lt;div class="owl-wrapper"&gt; &lt;div class="owl-item"&gt;&lt;/div&gt; &lt;div class="owl-item active"&gt;&lt;/div&gt; &lt;div class="owl-item"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Then here is the carousel which I am using as a nav:</p> <pre><code>&lt;div id="slide2"&gt; &lt;div class="owl-wrapper-outer"&gt; &lt;div class="owl-wrapper"&gt; &lt;div class="owl-item"&gt;&lt;/div&gt; &lt;div class="owl-item"&gt;&lt;/div&gt; &lt;!-- this should automatically get .active added --&gt; &lt;div class="owl-item"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I am not sure how to get the index of both elements, then add class active to #slide2 so that they match.</p> <p>Ok, here is an update, thanks to the code provided by Michael Schmuki. I added this code to a function that is already being used when the slide moves.. and it works.. however, in my slideshow for #slide1, it shows two slides at once. The good thing is is that both of these slides have the active class added automatically, but when I added in this code, only one of the thumbnails in #slide2 get the active class. Is there a reason it isn't picking up both active slides?</p> <p>Here's the part of the function I'm using:</p> <pre><code>function animateIn(carousel){ var carousel = $('#slide1'); var nthChildActive = $(this).find(".active").index() + 1; $('#slide2 .owl-item .slide.active').removeClass('active'); $("#slide2 .owl-wrapper .owl-item:nth-child("+nthChildActive+")").addClass("active"); } </code></pre> <p>And here is where it is set up in Owl Carousel</p> <pre><code>carousel.owlCarousel({ items: 2, pagination:false, stopOnHover:true, afterMove: function() { animateIn(); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload