CODEWITHSUNDEEP
javascriptjquery
aynaz
aynaz

Reputation: 167

How to remove a class from current and add it to next

i have a navigator. when the document is ready i set a class to next child of visited. after that when i click on next button , i want to remove the class that called notvisityet from the current li and add it to next child. moreover i want to add the class visited to li of that child. i wrote that below but it does not work correctly.

here is my snippet :

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
	$(".visited").next().addClass('visited');
	$(".visited").next().children('em').removeClass('notvisityet');
});
.visited{ color:red}
.notvisityet{ color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

Upvotes: 0

Views: 93

Answers (5)

SilverSurfer
SilverSurfer

Reputation: 4368

I made some changes to your code. Hope it helps:

$(document).ready(function(e) {
    $(".visited").next().addClass('notvisityet');
    $('#next').click(function() {
        $(".visited:last").next().removeClass('notvisityet');
        $(".visited:last").next().addClass('visited').next().addClass("notvisityet");
    });
});
.visited{ color:red}
.notvisityet{ color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

Upvotes: 2

Heshankit
Heshankit

Reputation: 113

Please check below mentioned demo in jsfiddle

Demo

changed your code like this

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
    $(".visited").next().addClass('visited');

  if(!$('ol li:last-child').prev().hasClass('visited')){
    $(".visited").children('em').removeClass('notvisityet');
    $(".visited").nextAll().eq(1) .children('em').addClass('notvisityet');
  }
  else if($('ol li:last-child').hasClass('visited')){
    $('ol li:last-child').children('em').removeClass('notvisityet');
  }
    else{
    $(".visited").children('em').removeClass('notvisityet');
    $('ol li:last-child').children('em').addClass('notvisityet');
  }
});

Upvotes: 0

Kannan K
Kannan K

Reputation: 4461

Try this:

$('#next').click(function(){
  if($('#id1').hasClass('visited')==true){
    $("#id1").removeClass("visited");
    $('#id2').addClass("visited");
  }else if($('#id2').hasClass('visited')==true){
   $("#id2").removeClass("visited");
   $('#id3').addClass("visited");
  }else if($('#id3').hasClass('visited')==true){
   $("#id3").removeClass("visited");
   $('#id4').addClass("visited");
  }else if($('#id4').hasClass('visited')==true){
   $("#id4").removeClass("visited");
   $('#id1').addClass("visited");
  }
});


<ol>
      <li><em id="id1">one</li>
      <li><em id="id2">two</em></li>
      <li><em id="id3">tree</em></li>
      <li><em id="id4">four</em></li>
</ol>

Upvotes: 0

kravisingh
kravisingh

Reputation: 1660

You need change minor code in script:

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
	$(".visited").next().addClass('visited').prev().removeClass('visited');
  $(".visited").children().removeClass('notvisityet');
  $(".visited").next().children().addClass('notvisityet');	
});
.visited{ color:red}
.notvisityet{ color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

You can also check this Fiddle

Upvotes: 0

venkata krishnan
venkata krishnan

Reputation: 2046

with the question u have asked, i have made the necessary modifications. Hope the below code helps 

$('#next').click(function(){
    elem=$(".visited")
    elem.next().addClass('visited');
    elem.removeClass('visited');
    elem.next().children('em').removeClass('notvisityet');
    elem.next().next().children('em').addClass('notvisityet');

});

Upvotes: 0

Related Questions