Transferring class titles between div elements

Question

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds.

My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one.

For instance:

<div class="wrapper">
 <div></div>
 <div></div>
 <div class="previous-one"></div>
 <div class="in-focus"></div>
 <div class="next-one"></div>
 <div></div>
 <div></div>
</div>

would become:

<div class="wrapper">
 <div></div>
 <div></div>
 <div></div>
 <div class="previous-one"></div>
 <div class="in-focus"></div>
 <div class="next-one"></div>
 <div></div>
</div>

I hope this explanation is clear. This is my first post here, so let's kick things off with a challenge!

Thank you in advance for any feedback or suggestions.

javascript jquery html css

Answer 1

Answer №1

One possible solution using jQuery is outlined below:

var colors = ['blue', 'green', 'red'],
    timer = 1000;

setInterval(function() {
  for(var c in colors) {
    var $current = $('.' + colors[c]),
        $next = $current.next('li');
    if($next.length == 0) {
      $next = $('ul li:first-child');
    }
    $current.removeClass(colors[c]);
    $next.addClass(colors[c]);
  }
}, timer);

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>lorem</li>
  <li class="blue">ipsum</li>
  <li class="green">dolor</li>
  <li class="red">hello</li>
  <li>world</li>
  <li>again</li>
</ul>

Answer 2

One possible solution using jQuery is outlined below:

var colors = ['blue', 'green', 'red'],
    timer = 1000;

setInterval(function() {
  for(var c in colors) {
    var $current = $('.' + colors[c]),
        $next = $current.next('li');
    if($next.length == 0) {
      $next = $('ul li:first-child');
    }
    $current.removeClass(colors[c]);
    $next.addClass(colors[c]);
  }
}, timer);

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>lorem</li>
  <li class="blue">ipsum</li>
  <li class="green">dolor</li>
  <li class="red">hello</li>
  <li>world</li>
  <li>again</li>
</ul>

Answer 3

Answer №2

Consider each step carefully.

Locate all divisions within the container.
Eliminate the "previous-one" designation from the relevant item.
Swap "in-focus" with "previous-one".
Substitute "next-one" with "in-focus".
Determine if there is a subsequent element after in-focus.
- If one exists, assign it as "next-one".
- Alternatively, designate the initial division in the list as "next-one".
Repeat this process as needed.

http://example.com/jsfiddlelink123/

function updateDisplay() {
    var sections = $(".container div");
    var nextItem = sections.filter(".next-one");
    var activeItem = sections.filter(".in-focus");

    sections.filter(".previous-one").removeClass("previous-one");
    activeItem.removeClass("in-focus");
    activeItem.addClass("previous-one");
    nextItem.removeClass("next-one");
    nextItem.addClass("in-focus");

    var newNextItem = nextItem.next("div");
    if (newNextItem.length === 0) newNextItem = sections.first();
    newNextItem.addClass("next-one");
}

setInterval(updateDisplay, 1000);

Answer 4

Consider each step carefully.

Locate all divisions within the container.
Eliminate the "previous-one" designation from the relevant item.
Swap "in-focus" with "previous-one".
Substitute "next-one" with "in-focus".
Determine if there is a subsequent element after in-focus.
- If one exists, assign it as "next-one".
- Alternatively, designate the initial division in the list as "next-one".
Repeat this process as needed.

http://example.com/jsfiddlelink123/

function updateDisplay() {
    var sections = $(".container div");
    var nextItem = sections.filter(".next-one");
    var activeItem = sections.filter(".in-focus");

    sections.filter(".previous-one").removeClass("previous-one");
    activeItem.removeClass("in-focus");
    activeItem.addClass("previous-one");
    nextItem.removeClass("next-one");
    nextItem.addClass("in-focus");

    var newNextItem = nextItem.next("div");
    if (newNextItem.length === 0) newNextItem = sections.first();
    newNextItem.addClass("next-one");
}

setInterval(updateDisplay, 1000);

Answer 5

Answer №3

My approach involves advancing each div by manipulating their classes. The next div gets the 'next-one' class while the current one has it removed. If the last div in the wrapper is reached, the class is moved to the first div. You can view the demo on this link.

Although the code may not be the most elegant, it functions effectively.

setInterval(function(){

    if($('.wrapper div').last()[0]==$('.next-one')[0]){
        $('.next-one').removeClass('next-one');
        $('.wrapper div').first().addClass('next-one');
    }
    else{
        $('.next-one').removeClass('next-one').next().addClass('next-one');
    }

    if($('.wrapper div').last()[0]==$('.previous-one')[0]){
        $('.previous-one').removeClass('previous-one');
        $('.wrapper div').first().addClass('previous-one');
    }
    else{
        $('.previous-one').removeClass('previous-one').next().addClass('previous-one');
    }

    if($('.wrapper div').last()[0]==$('.in-focus')[0]){
        $('.in-focus').removeClass('in-focus');
        $('.wrapper div').first().addClass('in-focus');
    }
    else{
        $('.in-focus').removeClass('in-focus').next().addClass('in-focus');
    }

},1000);

Answer 6

My approach involves advancing each div by manipulating their classes. The next div gets the 'next-one' class while the current one has it removed. If the last div in the wrapper is reached, the class is moved to the first div. You can view the demo on this link.

Although the code may not be the most elegant, it functions effectively.

setInterval(function(){

    if($('.wrapper div').last()[0]==$('.next-one')[0]){
        $('.next-one').removeClass('next-one');
        $('.wrapper div').first().addClass('next-one');
    }
    else{
        $('.next-one').removeClass('next-one').next().addClass('next-one');
    }

    if($('.wrapper div').last()[0]==$('.previous-one')[0]){
        $('.previous-one').removeClass('previous-one');
        $('.wrapper div').first().addClass('previous-one');
    }
    else{
        $('.previous-one').removeClass('previous-one').next().addClass('previous-one');
    }

    if($('.wrapper div').last()[0]==$('.in-focus')[0]){
        $('.in-focus').removeClass('in-focus');
        $('.wrapper div').first().addClass('in-focus');
    }
    else{
        $('.in-focus').removeClass('in-focus').next().addClass('in-focus');
    }

},1000);

Transferring class titles between div elements

Answer №1

Answer №2

Answer №3

Similar questions

Unlocking the API endpoints within nested arrays in a React project

Retrieving a particular section within a <div> element from a webpage

Please refrain from altering the color of my flag on hover

Can XMLHttpRequest be exploited for XSS attacks?

Ways to display scroll bar when hovering the mouse pointer?

Keeping Ajax active while the PHP script is running is essential

"Unleashing the power of custom servers to tap into the rendered HTML of Next

Hover over the text to disable the input element and display it as a textbox

The form validation in Bootstrap 5 seems to be having some trouble triggering

Steps for accessing the "this" keyword within the parent function

Modifying an item in a list using React and Redux

Monitoring the sharing of content on social media networks, rather than tracking individual

Analyzing the path of the cursor

A versatile function that displays a loading icon on top of a specified div

What methods can be used to cloak JavaScript functions from the end user?

Express is unable to locate the specified property

Utilizing a function argument within the :not() selector

Using javascript to quickly change the background to a transparent color

$http promise chain executing in an incorrect sequence

The proper approach is using CSS for linking pseudo-classes