Home/ Questions/Q 8012425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:19:46+00:00

Edit: Ok just to get this straight, you use the not selector to filter

  • 0

Edit: Ok just to get this straight, you use the not selector to filter attributes in a particular tag and not to filter child elements?

Can someone help me out whether I have some sort of syntax error here, or may be I’m not understanding the concept?

I have list items which when you click on, they change the font size of the body. Now the list item is within the body so its font changes to. I would like this UL to remain with the same font. so I am using the .not(“#ulSize”) as can be seen below. But this is not working.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#liSmall").click(function () {
                $('body').not('#ulSize').removeClass('large normal').addClass('small');
            });
            $("#liNormal").click(function () {
                $('body').not('#ulSize').removeClass('large small').addClass('normal');
            });
            $("#liLarge").click(function () {
                $('body').not('#ulSize').removeClass('small normal').addClass('large');
            });
        });
    </script>
    <style type="text/css">
        .large
        {
            font-size: large;
        }

        .normal
        {
            font-size: medium;
        }

        .small
        {
            font-size: small;
        }
    </style>
</head>
<body>
    <ul id="ulSize">
        <li id="liSmall">Small Font</li>
        <li id="liNormal">Normal Font</li>
        <li id="liLarge">Large Font</li>
    </ul>
        Text in here!!!
</body>
</html>

Thank you guys

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d recommend refactoring your JS to something like this:

    $(function(){
  $('#liSmall, #liNormal, #liLarge').on('click', function(e){
    $('body').removeClass('small medium large');
    switch(this.id){
      case 'liSmall': $('body').addClass('small'); break;
      case 'liMedium': $('body').addClass('medium'); break;
      case 'liLarge': $('body').addClass('large'); break;
    }
  });
});

    And then hard-code a font-size on the #ulSize list, and let the browser do the rest.

    #ulSize {
    font-size: 16px !important;
}
    • 0