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, Oct 05 '21 at 09:58

score 1 · Answer 1 · answered Oct 05 '21 at 09:59

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>

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? — Ferhat, Oct 05 '21 at 10:05
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](https://stackoverflow.com/a/20060541/519413) — Rory McCrossan, Oct 05 '21 at 10:59

score 1 · Answer 2 · answered Oct 05 '21 at 10:00

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>

jQuery ul li give css to selected

2 Answers2