JQuery change class name inside of specific elements

Question

I am looking for JQuery script to change a tag class inside of specific tags.

For example,

<h4 class=" id_1">
    <span class="favorite"> </span>
</h4>

In above tags, I want to change class="favorite" to class="title" by id_1 class. CSS for favorite and title is different.

Thank you!

Answer 1

You can also use attr method:

$('.id_1 .favorite').attr('class','title');

---

Using JavaScript:

document.querySelector('.id_1 .favorite').setAttribute('class','title');

Answer 2

您可以使用addClass和removeClass ：

$(".id_1").removeClass("favourite").addClass("title");

Answer 3

You can use addClass and removeClass to achieve this:

$('.id_1 .favorite').removeClass('favorite').addClass('title');

You could also use toggleClass if you can guarantee the starting state of the relevant elements:

$('.id_1 .favorite').toggleClass('favorite title');

Answer 4

$('.id_1 .favorite').removeClass('favourite').addClass('title');