jQuery ul li give css to selected

Question

I want to give css to whichever li tag is selected, but I'm stuck somewhere, can you help?

Following my code : HTML

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  
<br>

<li class="cat-item cat-item-21"><a href="#">Test</a></li>
 <br> 
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li> 
</ul>

CSS

body{
width:180px;
}
a{
  text-decoration:none;
}


.selected{
  background-color:grey;
}

jQuery

let cat = jQuery('[class^=cat-item]');
jQuery(cat).each(function() {
    
    jQuery('.cat-item a').click(function(){

      jQuery('li .cat-item a').addClass('selected');
    });
   
});

https://jsfiddle.net/justfeel/gwo45pnu/17/

You don't need to bind your click in your each (the way you have it you are binding the same thing multiple times) also your html is invalid - you cannot have a br as a child of a ul — Pete
– Pete, Commented Oct 5, 2021 at 9:58

Rory McCrossan · Accepted Answer · 2021-10-05 09:59:03Z

1

To do what you require use the Event object passed to the event handler as an argument to reference the element which was clicked. From there you can remove the class from all other elements while adding it to the current one.

Also note there's a couple of other issues in your code:

jQuery 1.7 is very outdated and needs to be updated. At time of this answer the most recent version is 3.6
You don't need the each() call. jQuery will automatically apply any methods you call to every element in the set (with some exceptions that aren't relevant here)
Remove the <br /> tag between your li as it's invalid HTML. If you want to increase the margin between the li use CSS.
You can alias jQuery within the document.ready event handler so your code becomes less verbose.

With all that said, try this:

jQuery($ => {
  let $a = $('.product-categories li a');
  $('.cat-item a').on('click', e => {  
    $a.removeClass('selected');
    $(e.target).addClass('selected');
  });
});

body { width: 180px; }
a { text-decoration: none; }
.selected { background-color: grey; }
.product-categories > li { margin-bottom: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  <li class="cat-item cat-item-21"><a href="#">Test</a></li>
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li>
</ul>

answered Oct 5, 2021 at 9:59

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

4 Comments

Ferhat Over a year ago

Thank you so much, I would have a last question, when I click on the a tag, I go to another page. Is it still possible to keep that class after the page changes?

Rory McCrossan Over a year ago

Unfortunately not, you would need to highlight the selected a element within the new page that's loaded, not using a click event in the original page. You could achieve that by matching the URLs - something like this

Ferhat Over a year ago

I understand, thanks for your interest.

Rory McCrossan Over a year ago

No problem, glad to help

Lokesh Suman · Accepted Answer · 2021-10-05 10:00:03Z

The following example will solve your problem.

    
    jQuery('.cat-item a').click(function(){
      jQuery('.cat-item a').removeClass('selected');
      jQuery(this).addClass('selected');
    });

body{
width:180px;
}
a{
  text-decoration:none;
}


.selected{
  background-color:grey;
}

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  
<br>

<li class="cat-item cat-item-21"><a href="#">Test</a></li>
 <br> 
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li> 
</ul>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Collectives™ on Stack Overflow

jQuery ul li give css to selected

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related