CSS give class or css to only selected element

Question

I have group of unordered list. I have create some function that make every list is clicked, it will run a JS Function. Now I want to add some css, if the list is clicked, its bg color will changed. My code so far:

function getDealsTable(obj) {
        var tenor = obj.innerHTML;
        $(this).closest('li').css('background-color: rgba(86, 142, 175, 1) !important');
        $(this).closest('li').siblings('li').css('background-color: rgba(15, 86, 132, 1) !important');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='tenors'>
    <li onclick='getDealsTable(this);'>12x</li>
    <li onclick='getDealsTable(this);'>24x</li>
    <li onclick='getDealsTable(this);'>36x</li>
    <li onclick='getDealsTable(this);'>48x</li>
</ul>

Unfortunately it doesn't works. I have tried to change it to a class, but still not working. Anyone can help me? Thanks

closest means traverse up the tree - you can't have a closest li unless it is a nested ul (as your click is bound to an li) — Pete
– Pete, Commented Mar 19, 2019 at 15:32
'this' IS the li, so no need to do closest, try $(this).css('background-color: rgba(86, 142, 175, 1) !important'); — Chris
– Chris, Commented Mar 19, 2019 at 15:32

Get Off My Lawn · Accepted Answer · 2019-03-19 16:42:34Z

1

In order to use !important with jQuery, you need to have 2 parameters. The first parameter is cssText, the second is the text you want to set as explained here

Example:

$('.selector').css('cssText', 'color: red !important;')

You can also create the click event using on directly in the javascript, no need to place it on the html element.

$('ul.tenors > li').on('click', function() {
  // Reset all the li colors (must come first)
  $('ul.tenors > li').css('cssText','background-color: rgba(86, 142, 175, 1) !important;');
  // Set the color of the clicked li item (must come second)
  $(this).css('cssText', 'background-color: rgba(15, 86, 132, 1) !important;');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='tenors'>
  <li>12x</li>
  <li>24x</li>
  <li>36x</li>
  <li>48x</li>
</ul>

edited Mar 19, 2019 at 16:42

answered Mar 19, 2019 at 15:39

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

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

3 Comments

Cross Vander Over a year ago

Perfect! But at your code, the color is reversed. But it's okay, I can handle it. Also thanks to remove that function to be just point it at its class. Thanks!

Get Off My Lawn Over a year ago

I added some comments to the js, just in case you need them.

Cross Vander Over a year ago

Sure! Thanks for explanation... :)

Collectives™ on Stack Overflow

CSS give class or css to only selected element

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related