jQuery: add class on current element

Question

I am trying to add class on my li element.I want to add class on click. when I click on button its add css class on current li . Like when I click first time then it's active first time. after second click it's active on second li,

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("li:first").addClass("intro");
    });
});
</script>
<style>
.intro {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>
<li>This is a heading</li>


<button>Add a class name to the first p element</button>

</body>
</html>

What should be your active element? I see no .active or anything in your code — Roko C. Buljan
– Roko C. Buljan, Commented May 6, 2017 at 7:47

prasanth · Accepted Answer · 2017-05-06 12:56:27Z

1

Count the click event and apply with eq() .And li length is 8 .so apply condition after 7 reach ,count reset to 0

var c = 0;
$(document).ready(function() {
  $("button").click(function() {
    if (c > 7) {
      c = 0;
    }
    $("li").removeClass('intro')
    $("li").eq(c).addClass("intro");
    c++;

  });
});

.intro {
  font-size: 150%;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  <h1>This is a heading</h1>

  <li class="intro">This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>


  <button>Add a class name to the first p element</button>

</body>

</html>

Updated answer with prev and next for slide

var c = 0;
$(document).ready(function() {
  $("button").click(function() {
    $(this).attr('data') == 'next' ? c++ : c--;
    if (c > 7) {
      c = 0;
    }
    $("li").removeClass('intro')
    $("li").eq(c).addClass("intro");


  });
});

.intro {
  font-size: 150%;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  <h1>This is a heading</h1>

  <li class="intro">This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>
  <li>This is a heading</li>


  <button data="next">next</button>
  <button data="prev">prev</button>

</body>

</html>

edited May 6, 2017 at 12:56

answered May 6, 2017 at 7:54

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Roko C. Buljan Over a year ago

Prasad, c = c > 7 ? 0 : c;... we're not supposed to modify JS by adding a HTML element. Can you improve your answer to make your JS more dynamic?

sanjay Over a year ago

prasad@ you there

sanjay Over a year ago

Prasad , I need first Li as a active class,

prasanth Over a year ago

@sanjay for default first li is active right.see my updated answer

sanjay Over a year ago

Well this is awesome @ Thanks for this

|

Manos Kounelakis · Accepted Answer · 2017-05-06 07:56:17Z

0

Maybe you could do it like this:

$(document).ready(function(){

    $("button").click(function(){
       //Find the li with the active class and add your other class
       $("li.active").addClass("your-class");
    });
})

Here is a demo snippet

$(document).ready(function(){

  $("button").click(function(){
    $("li.active").addClass('foo-class')
  
  })
})

.foo-class{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='active'>Active</li>
  <li> Non active</li>
</ul>
<button>Click me</button>

edited May 6, 2017 at 7:56

answered May 6, 2017 at 7:50

Manos Kounelakis

3,2225 gold badges39 silver badges68 bronze badges

7 Comments

Manos Kounelakis Over a year ago

Why downvoting?Can you explain

Manos Kounelakis Over a year ago

why?Can you explain

Manos Kounelakis Over a year ago

@RokoC.Buljan have a look at my snippet

sanjay Over a year ago

Roko C.Buljain@ if you have good amount of connect it's not mean you have to previlage to down any script or question

Manos Kounelakis Over a year ago

@sanjay thanks .My scrip may not do what the OP wants but it is a working code

|

brasofilo · Accepted Answer · 2017-05-06 14:15:14Z

0

Find the li with the active class and add your other class

$(document).ready(function(){
    $("button").click(function(){
       // Find li and add other class
       var l=$("body").find("li:first-child");
       $(l).addClass("your-class");
    });
})

edited May 6, 2017 at 14:15

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

answered May 6, 2017 at 8:53

Fatema Taher Kapasi

1

1 Comment

Fatema Taher Kapasi Over a year ago

Thanks To Improve my Answer.

Collectives™ on Stack Overflow

jQuery: add class on current element

3 Answers 3

7 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related