title: Best approach for applying specific client-side logic to a set of related elements
body: <p>I have an HTML/CSS menu that I need to integrate with a legacy ASP application. Depending on the user or the environment, certain menu items are shown or hidden based on a variety of client-side conditions.</p>
  
  <p>Most of the time the client-side conditions determine whether to show or hide a single menu item, but there are occasions where a group of items may require the same condition on the client-side. I apologize in advance if this is confusing, but here is an example:</p>
  
  <pre><code>&lt;li&gt;Link 1&lt;/li&gt; 
  &lt;li&gt;Link 2&lt;/li&gt;
  &lt;li&gt;Link 3&lt;/li&gt;
  &lt;li&gt;Link 4&lt;/li&gt;
  </code></pre>
  
  <p>In the above example, links 1, 2, and 4 should only be displayed if variable <code>bFoo == 60</code>. Link 3 should be displayed regardless.</p>
  
  <p>I'm wondering what the best approach is for applying specific logic to a group of elements that may or may not be sequential. Obviously, I could assign a separate ID to each element, and group them in my selector like this:</p>
  
  <pre><code>$("#link1, #link2, #link4").toggle(bFoo == 60);
  </code></pre>
  
  <p>I could also give the elements a common class like so:</p>
  
  <pre><code>$(".special-links").toggle(bFoo == 60);
  </code></pre>
  
  <p>I'm leaning towards the first option for the sake of clarity, but I'm wondering if there's a better option available that I haven't considered yet. There are different variations of the above example throughout the whole menu which contains 100+ links, so I want my solution to be as maintainable as possible. Is what I've mentioned above the best I can hope for, or am I being really stupid right now and overlooking an obvious and easy solution?</p>
  
  <p>I hope what I'm asking for makes sense. If my question is unclear, please let me know and I will try to explain it better.</p>