jQuery ul li give css to selected-CodePudding

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/

CodePudding user response：

there is your solution

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

CodePudding user response：

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>

CodePudding user response：

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>