title: How to change CSS all element don't have class `name` on Javascript?
body: <p>I write a filter product by category.</p>
  
  <p>When I click a category, it will add a class <code>selected</code> to  element and the background of this category had <code>selected</code>.</p>
  
  <p>I think problem at line:</p>
  
  <p><code>if (!$filterLinks.hasClass('selected') )</code></p>
  
  <p>I want to when user click another <li> element, all <li> element should go to background default is <code>white</code>.</p>
  
  <p>My HTML structure:</p>
  
  <pre><code>&lt;ul id="filters"&gt;
      &lt;li&gt; &lt;a class="selected" data-filter="*"&gt;&lt;/a&gt; All &lt;li&gt;
      &lt;li&gt; &lt;a data-filter=".nokia"&gt;&lt;/a&gt; Nokia &lt;li&gt;
      &lt;li&gt; &lt;a data-filter=".samsung"&gt;&lt;/a&gt; Samsung &lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And my code:</p>
  
  <pre><code>var $filterLinks = $('#filters a');
  $filterLinks.click(function(){
      var $this = $(this);
      $this.parents('li').css("background", "red");
      if ( $this.hasClass('selected') ) {
          return;
      }
  
      $filterLinks.filter('.selected').removeClass('selected');
      $this.addClass('selected');
  
      // problem at here, I want when user click another &lt;li&gt; element, 
      // all &lt;li&gt; element should be go to background default is `white`.
      if (!$filterLinks.hasClass('selected') ) {
          $filterLinks.parents('li').css("background", "white");
      }
  }
  </code></pre>
  
  <p>Full code at here: <a href="https://jsfiddle.net/az2e51c7/" rel="nofollow noreferrer">https://jsfiddle.net/az2e51c7/</a></p>