Use jQuery to locate the active class within a specific list item and then transfer that class to a different item within the

I have a pair of indicator lists for a bootstrap carousel

First List:

<ol class="rightci carousel-indicators">
  <li class="active" data-target="#carousel-example-generic" data-slide-to="0" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1" ></li>
<li data-target="#carousel-example-generic" data-slide-to="2" ></li>
<li data-target="#carousel-example-generic" data-slide-to="3" ></li>
</ol>

Second List:

<div class="left leftci carousel-indicators">
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a>
</div>

The goal is to check if the children of the First list have the active class and then add the active class to the corresponding children in the Second list.

Since the First list serves as the carousel indicators, it changes as the carousel item changes.

For Example: If the third item from the First list has the active class, then add the active class to the third item of the Second list.

This is the jQuery code I tried (I am new to jQuery):

var index = $('#rcl li.active').parent().index();
    $('#lcl span.activelink').removeClass('activelink');
    $('#lcl span').eq(index).addClass('activelink');

I'm currently experimenting with this concept. Check out the example on both indicators here: https://jsfiddle.net/ppwn8oau/

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you're looking for a solution, this code snippet might be helpful:

var index = $('#rcl li.active').attr('slide-to');
$('#lcl span.activelink').removeClass('activelink');
$('#lcl span[slide-to=' + index + ']').addClass('activelink');

UPDATE

$('#rcl li').click(function(event) {

  // set the clicked element as active
  $('#rcl li.active').removeClass('active');
  $(event.target).addClass('active');

  // get the index of the active element
  var index = $('#rcl li.active').attr('data-slide-to');

  // apply active styling to the second list
  $('#lcl span.activelink').removeClass('activelink');
  $('#lcl span[data-slide-to=' + index + ']').addClass('activelink');

});
#rcl li {
  cursor: pointer;
}
#rcl li.active {
  color: red;
}
#lcl span.activelink {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ol id="rcl" class="rightci carousel-indicators">
  <li class="active" data-target="#carousel-example-generic" data-slide-to="0">one</li>
  <li data-target="#carousel-example-generic" data-slide-to="1">two</li>
  <li data-target="#carousel-example-generic" data-slide-to="2">three</li>
  <li data-target="#carousel-example-generic" data-slide-to="3">four</li>
</ol>

<div id="lcl" class="left leftci carousel-indicators">
  <a href=""><span class="leftindicators activelink" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a>
</div>

Answer №2

Give this a shot: 

let currentIndex = $('.selectedci li.active').data('slide-to');    
$('.selectedci li').removeClass('active');    
$('.leftci a:eq(' + currentIndex + ')').find('span').addClass('active');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on receiving a date input in a datetime format upon clicking a submit button

Currently, I am developing a daily report feature for my system. One of the requirements is to have an input field where users can select a date using a datepicker. When the user clicks the submit button, the system needs to retrieve the date from the data ...

phphtmlmysqldatedatetime

Using Vue to dynamically set custom validation messages

I am currently tackling the challenge of modifying the default invalid text for form inputs with the code snippet provided below. The method I am attempting works when the text is static, but the text in my case must be dynamic, requiring a prop/data value ...

javascripthtmlvue.jsvalidationinput

Tips for iterating through the properties of every object within a Knockout observableArray and dynamically generating a table

My observableArray is dynamically populated with SQL data, resulting in varying columns each time. I am trying to present the SQL results in an HTML table but facing issues with the code below. This is the desired output format... https://i.sstatic.net/ ...

javascriptjsonknockout.js

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

cssreactjsnext.jsfrontend

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Unlock real-time alerts with the power of JavaScript and PHP!

I am currently working on enhancing my skills in javascript. I have a basic idea of what I want to achieve. My goal is to create an automated javascript function that accesses a php page. This php page will create an array of new notifications for the ja ...

phpjavascriptjqueryajaxarrays

Determine the dimensions of the objects within a JSON array

My JSON response creation looks like this : { "G5LDUHRPEEA6B-39CFBWYA": [], "JMSK0DKOEEA0UXMY750O3W": [], "ISVN8JF1EEAD3W398ZNOSA": [ { "delloData": "1478644629", "ref": "75", "dataType": "String", "somePart": LA, ...

javascriptarraysjsonlodash

Combining intersecting sets within an array of sets

I am working with an array that contains minimum and maximum values for various sets. Here is an example of what the array looks like: Array ( [0] => Array ( [0] => 1200 [1] => 2400 ) [1] => Arr ...

phpjavascriptarrays

Click to move directly to a specific section

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

javascriptjqueryhtmlcssscroll

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

Enhancing the node module of a subpackage within Lerna: A step-by-step guide

I recently integrated lerna into my workflow to streamline the installation of all node modules for multiple sub packages with just one command. Currently, I'm only utilizing the lerna bootstrap feature. Here's a snippet from my lerna.json: { & ...

javascriptnode.jsnpmyarnpkglerna

Incorporating Button Value from Anchor Tag Title Upon Page Load

Currently, I am working on a real estate project and facing an issue with a contact modal box. My goal is to extract the title from tag "a" and place it as the button value in the modal box. English isn't my strong suit, so please excuse any errors i ...

javascriptjqueryhtml

The input value remains a string even after it has been converted to a float

I can't figure out where I'm going wrong. I'm attempting a simple task: getting user input, converting it to a float, and performing a calculation with that value. However, all I keep getting is NaN. Here's the input (I normally replac ...

javascriptjquery

Utilizing AJAX to send information to a custom WordPress post type

I'm trying to submit form data to a custom post type I created in WordPress, including the name, email, and message. However, my AJAX request doesn't seem to be working. Everything works fine without the Ajax request. What am I missing here? &l ...

phpjqueryajaxwordpress

Using a CSS Module Class as a Variable in NextJS

Apologies in advance if I miss any details - this marks my debut post on Stack Overflow. The main objective of the function is to operate my hamburger menu, either opening or closing it. I have shared a snapshot of the JSX file pertaining to this issue: N ...

javascriptcssnext.jsjsxcss-modules

Conflict between jquery and hoverIntent libraries

I've encountered an issue with a website that was functioning properly until we added a new form to a specific page. The form, created by another person, utilizes javascript/jQuery for processing. Since adding this form, it has caused the majority of ...

javascriptjqueryhtmlwordpress

Utilizing AJAX Requests Across Various Functions

My challenge involves handling multiple AJAX calls in a simple manner. To solve this, I crafted the following method: function handleAjaxCalls(url) { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: url, data: " ...

javascriptjqueryajax

How can you append an object with a defined key to an array in Vue?

Currently developing a vue-application that includes a component for managing driving licenses. Here is an overview of my data setup: data() { return { custom_licenses: [], basic_licenses: [] } } Within my methods, I have the following l ...

javascriptarraysvue.jsvuejs2

React: the props appear to be undefined when they should actually have a value

I have a requirement for my props in the children class to be an array of Event objects. Prior to using it in App.js, I am checking if the array is empty like this: function App() { class Event { constructor(id, title, date){ this.id = id; ...

javascriptreactjsundefinedreact-props

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

javascripthtmlangulartypescript