How to add class to an element using its existing class name when there are multiple elements having same class name in jQuery?

Question

I'm calling a function on Click event to add a CSS class to an item in the list of elements with same class name.

Here's what I'm trying to achieve On the click of the button, I want to add the class .active to a particular logo image. Let's say at index 0 or 1

Please help me fix the issue.

document.ready(function() {
  function setActive() {
    $(".logo-slider .logos .logo")[0].addClass("active");
  }
})

.active {
  border: 1px solid red;
}

Super User · Answer

You can use nth-child() css property to select specific element. Check snippet below..

function setActive() {
    $(".logo-slider .logos .col:nth-child(2) .logo").addClass("active");
  }

.active {
  border: 1px solid red;
}

Sudhanshu · Answer

Thanks for your help. Your comments were helpful. I found an alternate solution.

Here's how I did it.

$(".logo-slider .logos .logo")[0].classList.add("active");

Got this idea after reading some of your comments. Thanks.

How to add class to an element using its existing class name when there are multiple elements having same class name in jQuery?

2 Answers