CODEWITHSUNDEEP
javascriptjquery
sanjay
sanjay

Reputation: 121

jQuery: add class on current element

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>

Upvotes: 0

Views: 1342

Answers (3)

Fatema Taher Kapasi
Fatema Taher Kapasi

Reputation: 1

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");
    });
})

Upvotes: 0

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 1

Manos Kounelakis
Manos Kounelakis

Reputation: 3161

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>

Upvotes: 0

Related Questions