Changing html classes using jquery

Question

I have many elements with the same class name such as:

<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact active" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .

All the classes have the same name except for one which says 'contact active'.
This element in the page will be highlighted when the user clicks on it. I've wrote a jquery script to change the class name when clicked on here:

$('#content').click(function() {
$(this).removeClass('contact');
$(this).addClass('contact active');
});

But the problem is, it only searches for one matching id and then it stops. So, except for the first element all the other elements have no effect. Also I would like to change the name of the already active class ('contact active') back to just 'contact' when I click on the other elements.

id should not be repeated. You should use class instead. Also I suggest to use toggleClass jQuery function — Rashomon
– Rashomon, Commented Aug 29, 2018 at 7:57
id should be unique, you cannot have more than 1 element that has the same id — Thum Choon Tat
– Thum Choon Tat, Commented Aug 29, 2018 at 7:57
Yes but these classes are being printed on a loop using php. — Raiyu
– Raiyu, Commented Aug 29, 2018 at 7:57
I suggest changing the PHP loop so that ids are unique and then attach the event via a class, e.g. "contact". — Stonedecroze
– Stonedecroze, Commented Aug 29, 2018 at 7:59

mplungjan · Accepted Answer · 2018-08-29 08:01:31Z

3

IDs must be unique. Your id selector is assigning click event to only first element in matched set.

You need to modify the click event to have class selector and not ID Selector:

 var $contactDiv = $('.contact');
 $contactDiv.click(function() {
  $contactDiv.removeClass('active'); // remove all active
  $(this).addClass('active'); // add it back on this object
 });

edited Aug 29, 2018 at 8:01

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 29, 2018 at 8:00

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2018-08-29 08:09:00Z

1

The main problem you have is that id attributes need to always be unique within the DOM. If you want to group elements with a common identifier, use a class.

You can then select the elements by that class and call toggleClass() on them. Note that you also don't need to remove/add the contact class either.

the last problem is there can be only one active class at a time so the other active class should get unselected.

In that case you can simply call removeClass() on all the .content elements but the one which was clicked. Try this:

$('.content').click(function() {
  $('.content').not(this).removeClass('active');
  $(this).toggleClass('active');
});

.active {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="content contact">
    Content...
  </li>
  <li class="content contact active">
    Content...
  </li>
  <li class="content contact">
    Content...
  </li>
  <li class="content contact">
    Content...
  </li>
</ul>

edited Aug 29, 2018 at 8:09

answered Aug 29, 2018 at 8:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Raiyu Over a year ago

My bad, Great this works! but the last problem is there can be only one active class at a time so the other active class should get unselected.

Gufran Hasan · Accepted Answer · 2018-08-29 08:10:57Z

$('.contact').click(function() {
 $('.contact').removeClass('active');
 $(this).addClass('active');
});

.active {
  color: #000;
  font-size:20px;
  font-weight:700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="contact">
    Content 1...
  </li>
  <li class="contact">
    Content 2...
  </li>
  <li class="contact">
    Content 3...
  </li>
  <li class="contact">
    Content 4...
  </li>
</ul>

The main issue is id. id should be unique on a page. As you are using id="content" multiple times on a single page. Now you need to modify your jQuery as:

$('.contact').click(function() {
 $('.contact').removeClass('active');
 $(this).addClass('active');
});

Collectives™ on Stack Overflow

Changing html classes using jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related