jQuery next div on click with loop

Question

Heey, I need a kind of text gallery. If you click on the first text, the second text should replace the first text, if you click on the second text, the third text should replace the second text, and so on. And if you click on the last text, the first text should replace the last text.

I started with this:

 $( ".text" ).click(function() { $( this ).css("display", "none"); $( next ).css("display", "block"); });

 .text { display: none; } .text:hover { color: blue; cursor: pointer; } .text:nth-child(1) { display: block; }

 <div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div> <div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div> <div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I don't know how to write this function. Can somebody help me? Would be so cool.

Answer 1

Try this:

$( ".text" ).click(function() {
    $( this ).css("display", "none");
    var next = $(this).next();
    if (next.text() == ''){
        $(".text").first().css("display", "block");
    }
    else{
        next.css("display", "block");
    }
});

Answer 2

• Use a Modulo Operator % to loopback to 0 an index curr
• Use jQuery's .eq() to get a specific index element.

 const $text = $('.text'); // Cache all const tot = $text.length; // How many let curr = 0; // Set index to 0 (First text) $text.on('click', () => { const $next = $text.eq(++curr % tot); // Increment and loopback $text.not($next).hide(); $next.show(); });

 .text { display: none; } .text:hover { color: blue; cursor: pointer; } .text:nth-child(1) { display: block; }

 <div class="text">1 The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div> <div class="text">2 The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div> <div class="text">3 Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

using next() and checking the length

 var elems = $(".text") elems.on("click", function() { var elem = $(this).css("display", "none"); var next = elem.next('.text') if (!next.length) next = elems.eq(0) $(next).css("display", "block"); });

 .text { display: none; } .text:hover { color: blue; cursor: pointer; } .text:nth-child(1) { display: block; }

 <div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div> <div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div> <div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

or with an array just removing and adding

 var elems = $(".text") var arrElems = elems.get() elems.on("click", function() { var elem = $(this).css("display", "none"); arrElems.push(arrElems.shift()) $(arrElems[0]).css("display", "block"); });

 .text { display: none; } .text:hover { color: blue; cursor: pointer; } .text:nth-child(1) { display: block; }

 <div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div> <div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div> <div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>